Bagaimana untuk Meregangkan Imej Latar Belakang untuk Mengisi Sel TD dengan CSS?

Menutup Sel TD dengan Regangan Imej

Isu: Tingkatkan halaman web dengan meregangkan imej latar belakang untuk diisi keseluruhan sel jadual () menggunakan CSS.

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

Objektif: Gunakan CSS untuk memanjangkan imej latar belakang untuk merangkumi keseluruhan sel TD, mencapai kesan "regang".

Penyelesaian:

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

Keserasian:

• Safari 3
• Chrome
• IE 9
• Opera 10
• Firefox 3.6

Pilihan Tambahan untuk 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>

Pengiktirafan:

Kredit diberikan kepada Chris Coyier untuk artikel bernas yang terdapat di: http:// css-tricks.com/perfect-full-page-background-image/

Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Imej Latar Belakang untuk Mengisi Sel TD dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!