Bagaimana untuk Meregangkan Imej Latar Belakang Merentasi Seluruh Sel TD?

Meregangkan Imej Latar Belakang merentas Sel TD

Dalam HTML, elemen TD mewakili sel data jadual. Menggayakan sel ini boleh meningkatkan persembahan data jadual. Artikel ini menangani cabaran penggayaan khusus: meregangkan imej latar belakang merentasi keseluruhan sel TD.

Untuk mencapai kesan ini, ubah suai skrip CSS seperti berikut:

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

• latar belakang: Mentakrifkan sumber imej latar belakang, kedudukan dan ulangan. "cover" memastikan imej memenuhi seluruh sel.
• -webkit-background-size: Awalan vendor untuk penyemak imbas berasaskan WebKit (cth., Safari, Chrome).
• -moz-background-size: Awalan vendor untuk penyemak imbas berasaskan Mozilla (cth., Firefox).
• -o-saiz latar belakang: Awalan vendor untuk penyemak imbas Opera.
• saiz latar belakang: Versi awalan bukan vendor disokong oleh moden penyemak imbas.

Keserasian:

Penyelesaian ini berfungsi dengan baik dalam penyemak imbas berikut:

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

Pertimbangan Tambahan untuk IE:

Untuk versi Internet Explorer sebelum 9, pendekatan alternatif tersedia:

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

Kaedah ini menggunakan penapis AlphaImageLoader Microsoft untuk mencapai kesan regangan imej latar belakang. Walau bagaimanapun, perlu diingat bahawa pendekatan ini mungkin tidak boleh dipercayai atau berprestasi seperti teknik CSS moden.

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