Bagaimana untuk Meregangkan Imej Latar Belakang untuk Mengisi Elemen dalam CSS?

Meregangkan Imej Latar Belakang dalam CSS

Mahu imej latar belakang anda menduduki keseluruhan ruang elemen seperti , tetapi nampaknya tidak dapat ia untuk meregangkan dengan betul? Berikut ialah penyelesaian CSS yang mudah.

Skrip CSS yang disediakan mentakrifkan kelas yang dipanggil "style1" dengan sifat berikut:

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

Walaupun ini akan memaparkan imej latar belakang pada elemen, ia menang ' t meregangkannya untuk memenuhi seluruh sel. Untuk mencapai matlamat ini, kita perlu mengubah suai sifat latar belakang:

.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;
}

Saiz latar belakang: sifat penutup memastikan bahawa imej latar belakang diubah saiz untuk meliputi keseluruhan elemen, tanpa memutarbelitkan nisbah bidangnya. Untuk memastikan imej kekal pada tempatnya, kami menggunakan kedudukan latar belakang: tengah tengah dan lampiran latar belakang: tetap.

Penyelesaian ini berfungsi dalam pelbagai jenis penyemak imbas, termasuk Safari, Chrome, IE 9 , Opera 10 , dan Firefox 3.6 .

Untuk Internet Explorer, penyelesaian alternatif boleh digunakan:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

Ini menggunakan penapis proprietari untuk meregangkan imej latar belakang, tetapi ia hanya disokong dalam IE.

Kredit: Artikel Chris Coyier "Imej Latar Belakang Halaman Penuh Sempurna" di http://css-tricks.com/perfect-full-page-background-image/

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