Bagaimana untuk mencapai kesan tidak regangan imej dalam css

Dalam CSS, anda boleh menetapkan sifat imej latar belakang untuk mencapai kesan tidak regangan imej. Kami biasanya menggunakan dua kaedah berikut:

Kaedah 1: saiz latar belakang

Gunakan atribut saiz latar belakang untuk menentukan saiz imej latar belakang Anda boleh menentukan lebar dan ketinggian imej latar belakang, atau anda boleh menggunakan penutup atau mengandungi untuk menyesuaikan diri dengan saiz imej latar belakang. Apabila menggunakan penutup, imej latar belakang diregangkan untuk mengisi keseluruhan lebar dan ketinggian elemen, tetapi tidak berubah bentuk. Apabila menggunakan kandungan, imej latar belakang akan mengekalkan saiz asalnya dalam elemen sambil mengisi elemen sepenuhnya.

Sebagai contoh, kod berikut boleh menetapkan imej latar belakang kepada saiz tetap tanpa regangan:

div {
  background-image: url("example.jpg");
  background-size: 300px 200px;
}

Kaedah 2: kedudukan latar belakang

Gunakan latar belakang Kedudukan - atribut boleh menetapkan kedudukan imej latar belakang, di mana nilainya boleh menjadi nilai piksel tertentu atau kedudukan relatif, seperti tengah, atas, dsb. Jika kita meletakkan imej latar belakang di tengah-tengah elemen, imej latar belakang tidak akan terbentang tidak kira bagaimana elemen berubah saiz.

Sebagai contoh, kod berikut menetapkan imej latar belakang di tengah-tengah elemen:

div {
  background-image: url("example.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

Menggunakan dua kaedah di atas, anda boleh mencapai imej latar belakang tidak regangan dalam CSS. Anda boleh memilih kaedah khusus yang sesuai dengan anda berdasarkan situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan tidak regangan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!