CSS で全幅の背景画像を実現するにはどうすればよいですか?

CSS で全幅の背景画像を実現する

Web 開発では、要素の幅全体に背景画像を拡張することができます。共通の要件。これは、視覚的に魅力的なレイアウトを作成し、一貫した美学を確立するのに役立ちます。これを実現するには、提供された CSS コードを変更しましょう:

<code class="css">.style1 {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</code>

説明:

• background-size: cover;: このプロパティは、背景が確実に画像は要素の幅全体をカバーします。
• background-position: center center;: 背景画像を水平方向と垂直方向の中央に配置します。
• background-repeat: no-repeat;: を防ぎます。要素内で画像が繰り返されないようにします。

ブラウザの互換性:

このソリューションは次でサポートされています:

• Safari 3
• Chrome 何でも
• IE 9
• Opera 10
• Firefox 3.6 (Firefox 4 は非ベンダープレフィックス付きバージョンをサポートします)

IE 固有の解決策:

IE との互換性のために、次の CSS コードを使用できます:

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

クレジット:

このソリューションのインスピレーションとクレジットは、https://css-tricks.com/perfect-full-page-background-image/ の Chris Coyier の記事にあります。

以上がCSS で全幅の背景画像を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。