ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 ですべての背景画像を表示可能_html/css_WEB-ITnose

CSS3 ですべての背景画像を表示可能_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:32:271290ブラウズ

最初は画像の一部が表示されない問題に対処していましたが、background-sizeを使用して要約する必要があることがわかりました。

background-size

最初に宣言します

Background-size は css3 プロパティです。 翻訳すると、背景のサイズを指定するために使用されていることが簡単にわかります。

ブラウザの互換性について

IE9 以降、Firefox 4 以降、Opera、Chrome、Safari 5 以降。

使用法

背景サイズには 4 つの値があります: (長さ | パーセント | カバー | 含む)。

例:background-size: 100px 100px;

percentage

: 主に背景の幅と高さを親要素のパーセンテージとして設定するために使用されます。例:background-size: 50% 50%;

長さとパーセンテージの使用法は、実際にはどちらも背景の長さと幅を設定することで画像を表示します。 パラメーターが 1 つだけある場合は、もう 1 つのパラメーターが auto であることを意味します。 V oCover

: 主に、背景画像が背景領域を完全に覆うのに十分な大きさに画像が拡大されていることを示します。 なお、背景配置領域には、背景画像の一部が表示されない場合がある。例:background-size: cover;
background-size: 主に次のことを意味します。イメージ画像を最大サイズまで拡張して、幅と高さがコンテンツ領域に完全に収まるようにします。例:background-size: contains;

画像コンテンツを完全に表示します

インターネット上で画像の URL を見つけました ('http://demo.sc.chinaz.com//Files/DownLoad/moban) /201512 /moban869/images/banner.jpg')

れー

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