Bagaimana untuk Meregangkan Imej Latar Belakang untuk Meliputi Keseluruhan Elemen HTML?

Mempertingkatkan Imej Latar Belakang untuk Meliputi Keseluruhan Elemen HTML

Dalam pertanyaan pengaturcaraan ini, kami menemui pengguna yang ingin meregangkan imej latar belakang pada keseluruhannya daripada sel. Kod HTML yang disediakan menggunakan imej latar belakang dengan lebar yang ditetapkan dalam div induk. CSS yang digunakan pada masa ini menjajarkan imej ke tengah kiri.

Untuk mencapai kesan yang diingini, kita mesti menggunakan sifat CSS tertentu yang membolehkan imej latar belakang merangkumi keseluruhan elemen induknya. Kod berikut memberikan 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>

Kod ini menggabungkan sifat saiz latar belakang, yang bersama-sama dengan nilai penutup, membolehkan imej latar belakang menyesuaikan diri dengan saiz elemen tanpa memutarbelitkan nisbah aspeknya . Selain itu, sifat tetap memastikan imej kekal pegun semasa menatal.

Penyelesaian ini serasi dengan pelbagai penyemak imbas, termasuk Safari 3 , Chrome, IE 9 , Opera 10 dan Firefox 3.6 .

Untuk pelayar tidak menyokong sifat saiz latar belakang, penyelesaian khusus IE alternatif wujud:

<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 untuk penyelesaian ini pergi ke artikel komprehensif oleh Chris Coyier: http://css-tricks.com/perfect -gambar-latar-muka-penuh/.

Atas ialah kandungan terperinci Bagaimana untuk Meregangkan Imej Latar Belakang untuk Meliputi Keseluruhan Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!