ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV の背景画像制御の問題、ありがとう_html/css_WEB-ITnose
DIV の背景画像制御の問題、ありがとう_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:22:12955ブラウズ
DIV が中央に表示されます。DIV の背景画像を DIV と同じ幅と高さにしたいのですが、どうすればよいですか? 現在の画像の幅が DIV の幅を超えています。
.middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; background-repeat:no-repeat; background-image:url(image/login/loginpic.png); } & LT;/DIV & GT;
返信 ディスカッション (解決策) 画像の幅が DIV の幅を超えています。画像が設定されました
画像の幅が DIV の幅を超えている場合は、画像の幅を設定します
作者が他のブラウザと互換性を持たせたい場合は、2 つのレイヤーを使用してください。
+1、z-index など、背景を作成する方法はたくさんあります
返信 ディスカッション (解決策) 画像の幅が DIV の幅を超えています。画像が設定されました
Document.GetelementByid ("#ID ").style.width
画像の幅に div の幅を割り当てます
画像の幅が DIV の幅を超えている場合は、幅を設定します画像の幅
document.getelementById ("#id").style.width
を使用しなかった画像の幅を設定する方法を教えてください。 img タグ
<!doctype html><html><head><meta charset="utf-8" /><style>*{ margin:0; padding:0;}#middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; postion:relative;}#bg{ width:500px; height:200px; position:absolute; z-index:-1;}</style></head><body><div id="middleimg"> <img id="bg" src="image/wallpaper-1542283.jpg" /> 哇咔咔咔我是一个登录框！</div></body></html> 画像の幅が DIV の幅を超えている場合は、画像の幅を設定します
document.getelementById("#id").style.width
div の幅を割り当てます画像の幅
画像の幅の設定方法を教えてください。 img タグを使用しませんでした
背景画像の幅と高さを設定する必要はありません。そうですね、xy 座標の設定はあなたの好みではないかもしれません。本来の意図。
img+positioning と z-index を組み合わせて使用するだけで、div と同じサイズの背景画像をシミュレートできます。
IE にのみ適用可能、
.middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; background-repeat:no-repeat; filter:progid:dximagetransform.microsoft.alphaimageloader(src='image/login/loginpic.png',sizingmethod='scale') } 作者が他のブラウザと互換性を持たせたい場合は、2 つのレイヤーを使用してください。
<!doctype html><html><head><meta charset="utf-8" /><style>*{ margin:0; padding:0;}#middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; postion:relative;}#bg{ width:500px; height:200px; position:absolute; z-index:-1;}</style></head><body><div id="middleimg"> <img id="bg" src="image/wallpaper-1542283.jpg" /> 哇咔咔咔我是一个登录框！</div></body></html> +1、z-index など、背景を作成する方法はたくさんあります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。