God comes to the rescue: the background-image cannot be displayed! _html/css

God comes to the rescue: the background-image cannot be displayed! _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:18:21

Original

1200 people have browsed it

先把我得代码贴一下：

登陆页面

The problem in the code has been pointed out. Someone can help me take a look and give some advice. I just use html to know this problem, but it is useless. css, so don’t ask me to change css

Reply to the discussion (solution)

1. There is a problem with the picture. I tested it and there is no problem. Please check if the path is written wrong. Is the picture name correct?
2. The login should be relatively aligned {position:relative;}, and the elements inside it should be absolutely positioned {position:absolute;left:xxxpx,right:xxxpx;}. This way you can place it wherever you like. <🎜> 436px;

height:273px;

margin-top:120px;

}Try removing that comment?
#login {
// Put a picture 436*273 pixels, but the picture can not come out. 436px;
height:273px;
margin-top:120px;

}Try removing that comment? I didn’t write comments, this is for everyone to understand

1. Problem with the picture, I tested it and there is no problem, please see if the path is wrong and the picture name is not wrong
2. The login should be relatively aligned {position:relative;}, and the elements inside it should be positioned absolutely {position:absolute;left:xxxpx,right:xxxpx;}. This way you can place it wherever you like. I still can't. I thought about it and the principle of nesting divs should be correct, but why can't it come out? When I just started showing pictures, I used Dreamweaver to develop them. Is it compatible with IE? question! !

If you don’t write comments, it will be fine for me to test.

No problem, maybe the LZ path is wrong.

No problem, maybe the LZ path is wrong.

But I use Dreamweaver to develop, write background- image: A box will automatically pop up for you to select an image, and the path will appear after selection. Moreover, the image I got is placed under the html folder/image, so I think it should be fine! !

And I put this image under this html folder/image

background-image:url( images/xiongdi.gif);

If you didn’t write a comment, I have no problem testing it. Thanks! The picture is losing. I developed it using Dreamweaver and wrote it as an HTML file. Do you all use IE to open it?

And the image I got is placed in this html folder/image
background-image:url(images/xiongdi.gif);

Sorry, I wrote it wrong: images hey-hey. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Trouble

Quoting the reply from bbjbepzz on the 8th floor: And I have this image placed under this html folder/image

background-image:url(images/xiongdi.gif);

Sorry, I made the mistake of writing it as images hehe. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Trouble

Quote from the 10th floor huangleijay’s reply:
Quote from the 8th floor bbjbepzz’s reply: And I have this image placed under this html folder/image

background-image :url(images/xiongdi.gif);

Sorry, I made the mistake of writing it as images hehe. Thank you very much for being so attentive! ! Can you take a screenshot of your web page and show it to me? Sorry, what kind of browser is this? Can you move the username and password input part to any part of the picture? When I was able to display images, these two things seemed to be connected, although I used nested divs to cover them! !

You are using the front-end, my CSS is not very good. Below is the code I changed for you. You can change it yourself to see the effect. Remember to write the image path correctly first. I used the path here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>登陆页面</title>		<style text="text/css">			body{				margin:0px;				padding:0px;				font-size:12px;				background-color:#007CBF;				overflow:hidden;				text-align:center;			}			#container{				width:100%;				position:absolute;			}			#login{				background-image:url(bbhh.jpg);				width:436px;				height:273px;				margin-top:120px;			}			#form{				position:relative;				top:100px;				left:100px;			}			#inp div input{				width:120px;				height:15px;				background-color:#333;				border:0px;				color:#0FF;			}			#button {				margin-left:25px;				margin-top:8px;			}			#button input{				border:0px;				width:49px;				heigth:18px;				color:#666;				margin-left:8px;				cursor:hand;			}		</style>	</head>	<body>		<div id="container" align="center">    			<div id="login">				<div id="form">					<form>						<div id="inp"> 							 <div>用户名：<input type="text" name="username"/></div>							  <div> 密  码：<input type="password" name="password"/></div>						 </div>						 <div id="button">							<input type="submit" value="注册" />							 <input type="button" value="登录" />						 </div>					</form>				</div>			</div>                         		</div>	</body></html>

Copy after login

You need to move the username and password to any position and change the style below.
#form{
position:relative;
top:100px;
left:100px;
}

Just change the top and left to what you think is appropriate The location is fine.

It is recommended that the code format should be better written, and the indentation should be indented. It seems to have a sense of hierarchy and is comfortable to read.