Bagaimana untuk menetapkan latar belakang untuk tidak berulang dalam css

Dalam reka bentuk web, imej latar belakang adalah elemen yang sangat penting yang boleh menjadikan halaman web lebih cantik. Walau bagaimanapun, jika imej latar belakang anda muncul beberapa kali berturut-turut pada halaman web, halaman web mungkin kelihatan sangat berulang dan monoton. Oleh itu, apabila menggunakan imej latar belakang, kita perlu memberi perhatian kepada cara untuk mengelakkannya daripada berulang di halaman web.

Salah satu cara paling mudah ialah menggunakan sifat ulangan latar belakang dalam css. Sifat ini mengawal cara imej latar belakang diulang dalam halaman web. background-repeat mempunyai empat nilai yang tersedia: repeat (default), repeat-x, repeat-y, dan no-repeat. Antaranya, ulang bermaksud imej latar belakang berulang dalam kedua-dua arah mendatar dan menegak ulang-x bermakna imej latar belakang hanya berulang dalam arah mendatar, bukan dalam arah menegak berulang-y bermakna imej latar belakang hanya berulang; arah menegak Ia tidak muncul dalam arah mendatar;

Sebagai contoh, untuk mengelakkan imej latar belakang daripada berulang secara mendatar dan menegak, anda boleh menggunakan kod berikut:

background-repeat: no-repeat;

Tetapi kaedah ini mempunyai had: jika imej latar belakang anda terlalu kecil , tidak mencukupi untuk mengisi keseluruhan halaman web, maka kaedah ini akan menyebabkan hanya sebahagian kecil daripada imej latar belakang yang dipaparkan pada halaman web, dan meninggalkan banyak ruang kosong pada halaman web. Untuk menyelesaikan masalah ini, kita perlu menggunakan atribut kedudukan latar belakang - kedudukan latar belakang.

Atribut kedudukan latar belakang boleh membantu kami meletakkan imej latar belakang di mana-mana sahaja pada halaman web. Ia menerima dua nilai, nilai pertama ialah kedudukan mendatar dan nilai kedua ialah kedudukan menegak. Sebagai contoh, jika anda mahu imej latar belakang dipaparkan di sudut kiri atas, anda boleh menulis seperti ini:

background-position: left top;

Jika anda mahu imej latar belakang dipaparkan di sudut kanan bawah, anda boleh tulis seperti ini:

background-position: right bottom;

Jika anda mahu Untuk menjadikan imej latar belakang meliputi seluruh halaman web, anda boleh menulis seperti ini:

background-position: center center;

Sesetengah pereka web akan menggunakan lebih kaedah kompleks untuk menghalang imej latar belakang daripada berulang, iaitu melalui pelaksanaan berbilang latar belakang CSS3. Berbilang latar belakang membolehkan anda menggunakan berbilang imej latar belakang pada elemen yang sama untuk mencapai kesan seperti "latar belakang tidak berulang".

Menggunakan berbilang latar belakang memerlukan atribut imej latar belakang css3. Ia menerima set imej latar belakang yang dipisahkan dengan koma. Sebagai contoh, berikut ialah latar belakang yang terdiri daripada tiga imej:

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");

Di sini, kita boleh mengawal kedudukan setiap imej latar belakang supaya ia tidak muncul berulang kali. Sebagai contoh, kod berikut boleh menjadikan tiga imej latar belakang meliputi keseluruhan halaman web dari kedudukan berbeza tanpa mengulangi satu sama lain:

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
background-position: left top, center center, right bottom;
background-repeat: no-repeat;

Dengan menggunakan berbilang latar belakang, kami boleh mencapai reka bentuk latar belakang yang lebih kompleks, menjadikan web halaman Lebih berlapis dan tiga dimensi.

Ringkasnya, cara menghalang imej latar belakang daripada berulang bergantung pada sama ada pereka web boleh menggunakan pelbagai atribut CSS dengan mahir. Kami boleh menggunakan atribut ulangan latar belakang yang ringkas, atribut kedudukan latar belakang dan kaedah berbilang latar belakang yang lebih kompleks untuk memberikan imej latar belakang kesan terbaik pada halaman web, sekali gus meningkatkan keindahan dan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan latar belakang untuk tidak berulang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!