ホームページ > 記事 > ウェブフロントエンド > CSS を使用して背景画像を設定します。画像が比較的大きいので、DIV 内に完全に表示するにはどうすればよいですか? _html/css_WEB-ITnose
CSS を使用して背景画像を設定します。画像が比較的大きいので、DIV 内に完全に表示するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:12:151428ブラウズ
画像が 500*500 で、DIV が 100*100 であることを意味します。では、それを背景画像として設定し、画像の内容全体を表示するにはどうすればよいでしょうか。
これを JS で書きました:
b.style.backgroundImage="url('1.jpg')"
b.style.height="100px ";
画像は表示できますが、完全に表示されないということは、上で設定した高さと幅は効果がありません
これをどう書くか？
ディスカッションへの返信 (解決策)
b.style.backgroundRepeat="repeat";
これには画像のストレッチが必要です。 。 。
参考:
<!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><meta charset="utf-8" /><title>?</title><style type="text/css">.divBox { width:100px; height:100px; border:solid 1px red; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flashbutton.gif' ,sizingMethod= 'scale' ); background-repeat: no-repeat; background-positon: 100%, 100%; }</style></head> <body><div class="divBox">test...</div></body></html> Format Factory を使用して、まず画像を 100*100 に変換してから、それを div に書き込むことができます
画像の CSS スタイルを設定します。
幅: 100px;
高さ: 100px;
画像がどんなに大きくても、このサイズに従って表示されます。画像がこのサイズより小さい場合は拡大され、画像がこのサイズより大きい場合は縮小されます。
これには画像のストレッチが必要です。 。 。
HTML コード
0198477805357925a64db1fe1a376bef
OK、完了しました、ありがとう
背景:url(1.jpg);
-webkit-background-size: 100px 60px;声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。