ホームページ  >  記事  >  ウェブフロントエンド  >  神が救いの手を差し伸べます。背景画像が表示できません。 _html/css_WEB-ITnose

神が救いの手を差し伸べます。背景画像が表示できません。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:18:211186ブラウズ

先把我得代码贴一下:
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7登陆页面6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
     body{          //背景全蓝色
                          margin:0px;
padding:0px;
font-size:12px;
background-color:#007CBF;
overflow:hidden;
text-align:center;
}
#container{
                       //网页容器
width:980px;
}

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

}
#form{
                          //把用户名和密码form放在上面的表格上去,我觉得这两个东西虽然是用div套起来的,但是应该算是单独的两个元素吧,这里设175放在图片的合适位置,但是它好像和图片成为一块,设置这个的margin时候图片跟着动,设置上面的login时候,form也跟着动!!为什么???                             
                       margin-top:175px;
                     }

#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;
}
    531ac245ce3e4fe3d50054a55f265927

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
e0e6b80c2b871989cf94b51f0a97caf2
    
     632e27c3aa96ac486b57e04571b19ce3
         3f44b33c791f1c420f39aac77a9dde29
                ff9c23ada1bcecdd1a0fb5d5a0f18437
                    c3778c9b7b6eb1837d0ecfa752f65699 
                         dc6dce4a544fdca2df29d5ac0ea9906b用户名:e19482f9d6f5a1c23e542ef524fe76a916b28748ea4df4d9c2150843fecfba68
                          dc6dce4a544fdca2df29d5ac0ea9906b 密码:c4bd35c9ef4b630ed3a3c1cb1c4c910616b28748ea4df4d9c2150843fecfba68
                     16b28748ea4df4d9c2150843fecfba68
                     59f311df1edfa1e48c08e1724f1e6402
                        5f2038e1f8424a86c4c8754cf9503e83
                         aff4f24b8d851532c064d1be3f8d74ec
                     16b28748ea4df4d9c2150843fecfba68
                f5a47148e367a6035fd7a2faa965022e
            16b28748ea4df4d9c2150843fecfba68

        16b28748ea4df4d9c2150843fecfba68
                         
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e 誰かが私を見て、CSS ではなく、この問題を知りたいと思っています。 CSS を変更します


ディスカッションに返信します

1. 画像に問題があります。テストしましたが、パスが間違っているかどうかを確認できますか。画像名は間違っていませんか? 2. ログインは相対的に位置合わせされている必要があります。position:relative;}、その中の要素は絶対的に {position:absolute;left:xxxpx,right:xxxpx;} に配置されます。このように、好きな場所に配置できます。 G o #Login {

// 436*273 ピクセルの画像を配置しますが、画像は表示されません
Background-Image: URL (Images/xiongdi.gif)

} そのコメントを削除してみてください。 ? G o #Login {
// 436*273 ピクセルの画像を配置しますが、画像は表示されません
Background-Image: URL (Images/xiongdi.gif)

} そのコメントを削除してみてください。 ? コメントは書いていません、皆さんに理解していただくためにここにあります


1. 画像に問題があります。テストしましたが、問題はありませんでした。パスが間違っているか、画像の名前が間違っていないか確認してください。

2. ログインは相対カウンターポイント {position:relative;} で行う必要があり、その中の要素は絶対位置 {position:absolute;left:xxxpx,right:xxxpx;} になります。このように、好きな場所に配置できます。 まだできません。div のネストの原則は正しいはずですが、なぜ表示できないのですか。画像を表示し始めたばかりのとき、IE と互換性がありますか? ! !


コメントを書かなくてもテストは問題ありません。

問題はありません。LZ パスが間違っている可能性があります

問題はありません、LZ パスが間違っている可能性があります
ただし、開発には Dreamweaver を使用し、background-image を書き込みます: その後、ボックスが自動的にポップアップ表示されます画像を選択すると、選択後にパスが表示され、htmlフォルダー/画像の下に私が持っている画像が配置されているので、大丈夫だと思います! !

そして、この画像をこの html フォルダー/image の下に置きます

コメントを書かなくても、テストするのは問題ありません。 ありがとう! Dreamweaverで開発してHTMLファイルとして書きましたが、皆さんはIEで開いていますか?

そして、この画像を html フォルダー/image の下に置きました

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

ごめんなさい、画像として書くのを間違えました。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?トラブル

8 階の bbjbepzz からの返信を引用します: そして、私が持っている画像は、この HTML フォルダー/画像の下に配置されています

背景-画像:url(images/xiongdi.gif); 申し訳ありませんが、imageshehe を書きました。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?トラブル

10 階の huangleijay からの引用:
8 階の bbjbepzz からの引用: そして、この画像をこの HTML フォルダー/画像の下に配置しました

背景-画像:url(images/xiongdi.gif);

申し訳ありませんが、画像として書くのを間違えてしまいました、ふふ。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?すみません、これはどのようなブラウザですか?ユーザー名とパスワードの入力部分を画像の任意の部分に移動してもらえますか?画像を表示できたときは、ネストされた div を使用してカバーしていましたが、これら 2 つは接続されているように見えました。 !

フロントエンドを使用していますが、私の 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; }

適切と思われる位置に調整してください。

コード形式をより適切に記述し、インデントをインデントすることをお勧めします。階層感があり、読みやすいです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。