Bagaimana untuk Mencapai Imej Latar Belakang Lebar Penuh dalam CSS?

Mencapai Imej Latar Belakang Lebar Penuh dalam CSS

Dalam pembangunan web, memanjangkan imej latar belakang merentasi keseluruhan lebar elemen boleh menjadi keperluan biasa. Ini berguna untuk mencipta reka letak yang menarik secara visual dan mewujudkan estetika yang konsisten. Untuk mencapainya, mari kita ubah suai kod CSS yang disediakan:

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

Penjelasan:

• saiz latar belakang: penutup;: Sifat ini memastikan latar belakang imej meliputi keseluruhan lebar elemen.
• kedudukan latar belakang: tengah tengah;: Letakkan imej latar belakang dalam tengah secara mendatar dan menegak.
• background-repeat: no-repeat;: Menghalang imej daripada berulang dalam elemen.

Keserasian Pelayar:

Penyelesaian ini disokong dalam:

• Safari 3
• Chrome Whatever
• IE 9
• Opera 10
• Firefox 3.6 (Firefox 4 menyokong versi awalan bukan vendor)

Khusus IE Penyelesaian:

Untuk keserasian IE, kod CSS berikut boleh digunakan:

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

Kredit:

Inspirasi dan kredit untuk penyelesaian ini pergi ke artikel Chris Coyier di https://css-tricks.com/perfect-full-page-background-image/.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Imej Latar Belakang Lebar Penuh dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!