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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

先把我得代码贴一下：

登陆页面

誰かが私を見て、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 までご連絡ください。