大神来急救：关于background-image无法显示！_html/css

首頁

web前端

html教學

大神来急救：关于background-image无法显示！_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

先把我得代码贴一下：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

登陆页面

代码中的问题已经指出，其大神帮我看看，给点意见，我这里只是使用html想知道这个问题，没有用css，所以不要叫我换css

回复讨论(解决方案)

1.图片的问题，本人测试没有问题，你看看是不是路径写错了，图片名称没写错吧
2.应该让login相对对位｛position:relative;｝，他里面的元素绝对定位{position:absolute;left:xxxpx,right:xxxpx;}。这样就可以随心所以的摆放位置了。

#login{
//放上一张图片436*273像素，但是图片出不来
background-image:url(images/xiongdi.gif);
width:436px;
height:273px;
margin-top:120px;

}把那个注释去了试试？

#login{
//放上一张图片436*273像素，但是图片出不来
background-image:url(images/xiongdi.gif);
width:436px;
height:273px;
margin-top:120px;

}把那个注释去了试试？我没写注释，这里是为了让大伙看懂呀

1.图片的问题，本人测试没有问题，你看看是不是路径写错了，图片名称没写错吧
2.应该让login相对对位｛position:relative;｝，他里面的元素绝对定位{position:absolute;left:xxxpx,right:xxxpx;}。这样就可以随心所以的摆放位置了。我得还是不行，我想了想div嵌套应该原理不会错啊，但是为什么就出不来呢，刚刚开始的时候出了图片，我用的是dreamweaver开发的，会不会是IE兼容的问题！！

你没写注释的话，我测试也没问题。

木有问题，可能是LZ路径错了吧

木有问题，可能是LZ路径错了吧
但是我是用dreamweaver来开发的，写上background-image：后会自动弹出框让你选择图片，然后选择后就出现了路径了，而且我得这个图片是放在这个html文件夹/image下的，应该没问题我觉得！！

而且我得这个图片是放在这个html文件夹/ image下的
background-image:url( images/xiongdi.gif);

你没写注释的话，我测试也没问题。谢谢！图片 is lossing啊，我是用dreamweaver开发的，写的是html文件，你们都是用IE打开吗？

而且我得这个图片是放在这个html文件夹/image下的
background-image:url(images/xiongdi.gif);
不好意思，我写错了是images嘿嘿。非常感谢你，这么细心！！你能把你的网页效果截下来给我瞧瞧吗？麻烦了

引用 8 楼 bbjbepzz 的回复:而且我得这个图片是放在这个html文件夹/image下的
background-image:url(images/xiongdi.gif);
不好意思，我写错了是images嘿嘿。非常感谢你，这么细心！！你能把你的网页效果截下来给我瞧瞧吗？麻烦了

引用 10 楼 huangleijay 的回复:
引用 8 楼 bbjbepzz 的回复:而且我得这个图片是放在这个html文件夹/image下的
background-image:url(images/xiongdi.gif);
不好意思，我写错了是images嘿嘿。非常感谢你，这么细心！！你能把你的网页效果截下来给我瞧瞧吗？麻烦了啊，你这是个什么浏览器这么绚！你可以讲这个用户名和密码输入部分移到图片任意部分吗？我当初可以显示图片时候这两个东西好像是联系在一起的，虽然我是用嵌套的div套起来的！！

你把哥当前端使了，我CSS不怎么样的。下面是我帮你改了下的代码。你自己看效果自己改吧，记得把图片路径先写对了，我用的是我这边的路径。

<!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>

你要移到用户名和密码到任意位置改下面的样式。
#form{
position:relative;
top:100px;
left:100px;
}

改top和left就行了，调到你觉得合适的位置就行了。

建议代码格式写好点，该缩进的缩进，看来有点层次感，看的也舒服。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract