ホームページ > 記事 > ウェブフロントエンド > 神が救いの手を差し伸べます。背景画像が表示できません。 _html/css_WEB-ITnose
先把我得代码贴一下:
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 を変更します
// 436*273 ピクセルの画像を配置しますが、画像は表示されません
Background-Image: URL (Images/xiongdi.gif)
} そのコメントを削除してみてください。 ? G o #Login {
// 436*273 ピクセルの画像を配置しますが、画像は表示されません
Background-Image: URL (Images/xiongdi.gif)
} そのコメントを削除してみてください。 ? コメントは書いていません、皆さんに理解していただくためにここにあります
1. 画像に問題があります。テストしましたが、問題はありませんでした。パスが間違っているか、画像の名前が間違っていないか確認してください。
コメントを書かなくてもテストは問題ありません。
問題はありません。LZ パスが間違っている可能性があります
問題はありません、LZ パスが間違っている可能性があります
ただし、開発には Dreamweaver を使用し、background-image を書き込みます: その後、ボックスが自動的にポップアップ表示されます画像を選択すると、選択後にパスが表示され、htmlフォルダー/画像の下に私が持っている画像が配置されているので、大丈夫だと思います! !
そして、この画像をこの html フォルダー/image の下に置きます
コメントを書かなくても、テストするのは問題ありません。 ありがとう! Dreamweaverで開発してHTMLファイルとして書きましたが、皆さんはIEで開いていますか?
background-image:url(images/xiongdi.gif);
ごめんなさい、画像として書くのを間違えました。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?トラブル8 階の bbjbepzz からの返信を引用します: そして、私が持っている画像は、この HTML フォルダー/画像の下に配置されています
背景-画像:url(images/xiongdi.gif); 申し訳ありませんが、imageshehe を書きました。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?トラブル
10 階の huangleijay からの引用:
8 階の bbjbepzz からの引用: そして、この画像をこの HTML フォルダー/画像の下に配置しました
申し訳ありませんが、画像として書くのを間違えてしまいました、ふふ。とても丁寧に対応していただき、本当にありがとうございました! !ウェブページのスクリーンショットを撮って見せてもらえますか?すみません、これはどのようなブラウザですか?ユーザー名とパスワードの入力部分を画像の任意の部分に移動してもらえますか?画像を表示できたときは、ネストされた 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>