背景画像を引き伸ばして TD セルを CSS で埋めるにはどうすればよいですか?

画像ストレッチで TD セルをカバーする

問題: 背景画像をストレッチして塗りつぶして Web ページを強化するCSS を使用して表のセル全体 ()。

CSS フラグメント:

<code class="css"><style>
.style1 {
    background-image: url('http://localhost/msite/images/12.PNG');
    background-repeat: no-repeat;
    background-position: left center;
}
</style></code>

目的: CSS を使用して、 TD セル全体を囲むように背景画像を拡張し、「引き伸ばされた」効果を実現します。

解決策:

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

互換性:

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

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