Cara menggunakan CSS untuk menjadikan imej latar belakang tidak berulang

Dalam reka bentuk web, penggunaan imej latar belakang boleh mencantikkan halaman, menggesa rentak penulisan dan mewujudkan suasana halaman web. Walau bagaimanapun, corak beberapa imej latar belakang adalah kecil dan akan muncul berulang apabila berjubin, menjejaskan penampilan dan pengalaman membaca. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan imej latar belakang yang tidak berulang.

1. Gunakan atribut saiz latar belakang saiz latar belakang

Gunakan atribut saiz latar belakang untuk menukar saiz imej latar belakang supaya ia sesuai dengan saiz elemen semasa. Apabila imej latar belakang berjubin, atribut ini juga boleh membantu mencapai kesan imej latar belakang tidak berulang.

Kita boleh menetapkan nilai atribut saiz latar belakang kepada "auto 100%". Dengan cara ini CSS akan menjubinkan imej latar belakang secara mendatar dan bukannya mengulanginya secara menegak. Contohnya:

div{
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

Dalam contoh ini, imej latar belakang elemen div akan dijubin secara mendatar dan bukannya diulang secara menegak.

2. Gunakan atribut lampiran latar belakang lampiran latar belakang

Cara lain untuk menjadikan imej latar belakang tidak berulang ialah menggunakan atribut lampiran latar belakang. Sifat ini menentukan sama ada kedudukan imej latar belakang adalah relatif kepada viewport atau kepada elemen yang mengandungi.

Kami menetapkan nilai atribut lampiran latar belakang kepada tetap. Dengan cara ini, CSS akan membetulkan imej latar belakang dalam tetingkap, supaya imej latar belakang tidak akan bergerak apabila pengguna menatal halaman. Contohnya:

div{
  background-image: url(bg.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
}

Dalam contoh ini, imej latar belakang elemen div akan menatal dengan halaman, dan bukannya bergerak relatif kepada elemen div yang memaparkannya. Ini memastikan bahawa imej latar belakang tidak berulang.

3 Gunakan atribut asal latar belakang asal latar belakang

Jika anda ingin mengehadkan imej latar belakang kepada tepi elemen dan bukannya keseluruhan elemen, anda boleh menggunakan atribut asal latar belakang . Sebagai contoh, katakan anda ingin mengekang imej latar belakang ke sudut kiri atas bekas Anda boleh menggunakan CSS berikut:

div{
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: border-box;
  padding: 50px;
}

Dalam contoh ini, imej latar belakang elemen div hanya akan. muncul dalam kawasan jidar bekas (iaitu kawasan 50px dari sempadan) tanpa melebihi had sempadan.

Ringkasnya, menggunakan tiga sifat CSS di atas boleh mencapai kesan imej latar belakang yang tidak berulang dengan mudah. Sama ada anda ingin mencapai keindahan visual atau meningkatkan pengalaman membaca pengguna, mencapai kesan ini adalah sangat penting.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk menjadikan imej latar belakang tidak berulang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!