CSS の要素を埋めるために背景画像を引き伸ばすにはどうすればよいですか?

CSS で背景画像をストレッチする

背景画像を などの要素のスペース全体に配置したいのですが、取得できないようですきちんと伸ばすには？これは簡単な CSS ソリューションです。

提供された CSS スクリプトは、次のプロパティを持つ「style1」というクラスを定義します。

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

これにより、要素に背景画像が表示されますが、セル全体を埋めるように引き伸ばさないでください。これを実現するには、背景プロパティを変更する必要があります。

.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;
}

background-size: cover プロパティにより、アスペクト比を変えることなく、要素全体をカバーするように背景画像のサイズが変更されます。画像を所定の位置に保つには、background-position: center center と、background-attachment:fixed を使用します。

このソリューションは、Safari、Chrome、IE 9、Opera 10、などの幅広いブラウザーで動作します。

Internet Explorer の場合は、次の代替ソリューションを使用できます。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

これは、独自のフィルターを使用して背景画像を引き伸ばしますが、IE でのみサポートされています。

クレジット: Chris Coyier の記事「Perfect Full Page Background Image」(http://css-tricks.com/perfect-full-page-background-image/

)

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