css 背景サイズプロパティ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css 背景サイズプロパティ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:50:53

オリジナル

1016 人が閲覧しました

background-size 属性は、背景画像のサイズを指定します。

構文
background-size: length|percentage|cover|contain;
length は、背景画像の高さと幅を設定します。
最初の値は幅を設定し、2 番目の値は高さを設定します。
値が 1 つだけ設定されている場合、2 番目の値は「自動」に設定されます。

percentage は、背景画像の幅と高さを親要素のパーセンテージとして設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。

cover 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。背景画像の一部が背景アンカー領域に表示されない場合があります。

contain 画像の幅と高さがコンテンツ領域に完全に収まるように、イメージ画像を最大サイズまで拡大します。

デフォルト値: auto
継承: いいえ
バージョン: CSS3
JavaScript 構文: object.style.backgroundSize="60px 80px"

IE9+、Firefox 4+、Opera、Chrome、Safari 5+ は、background-size 属性をサポートします。

例 1:

<!DOCTYPE html><html><head><style> div{background:url(/i/bg_flower.gif);background-size:35% 100%;-moz-background-size:35% 100%; /* 老版本的 Firefox */background-repeat:no-repeat;}</style></head><body><div><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></div></body></html>

ログイン後にコピー

例 2:

<!DOCTYPE html><html><head><style> div{background:url(/i/bg_flower.gif);background-size:25%;border:2px solid #92b901;}</style></head><body><div><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>

ログイン後にコピー