背景画像を拡大して HTML 要素全体をカバーする方法-CSSチュートリアル-php.cn

背景画像を拡大して HTML 要素全体をカバーする方法

Linda Hamilton

リリース： 2024-11-05 08:49:02

オリジナル

367 人が閲覧しました

How to Stretch Background Images to Cover Entire HTML Elements?

HTML 要素全体をカバーするように背景画像を拡張する

このプログラミングクエリでは、背景画像を全体に拡張しようとするユーザーに遭遇します。

の細胞。提供された HTML コードは、親 div 内で設定された幅を持つ背景画像を使用します。現在使用されている CSS は、画像を左中央に配置します。

目的の効果を達成するには、背景画像が親要素の範囲全体をカバーできるようにする特定の 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 プロパティが組み込まれており、カバー値と組み合わせて、背景画像をアスペクト比を歪めることなく要素のサイズに適応させることができます。。さらに、固定プロパティにより、スクロール中に画像が静止したままになります。

このソリューションは、Safari 3 、Chrome、IE 9、Opera 10、Firefox 3.6 などのさまざまなブラウザと互換性があります。

ブラウザが背景サイズのプロパティをサポートしていない場合は、IE 固有の代替ソリューションが存在します:

<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>

ログイン後にコピー

このソリューションのクレジットは Chris Coyier による包括的な記事です: http://css-tricks.com/perfect -full-page-background-image/.

以上が背景画像を拡大して HTML 要素全体をカバーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。