latar belakang html tidak berulang

Bagaimana untuk menjadikan latar belakang HTML tidak berulang?

HTML (Hypertext Markup Language) ialah bahasa paling asas dalam pembangunan web Ia mengawal struktur dan kandungan halaman web melalui bahasa penanda. Dalam pembangunan web, reka bentuk latar belakang adalah sangat penting, ia boleh membawa keseronokan visual kepada pengguna dan menjadikan laman web lebih menarik. Walau bagaimanapun, kadangkala kami mendapati bahawa latar belakang halaman web diulang, yang sangat memudaratkan pengalaman visual. Jadi, bagaimana untuk mengelakkan latar belakang HTML daripada berulang? Artikel ini akan memberi anda jawapan terperinci.

1. Gunakan atribut background-repeat

Apabila saiz imej latar belakang tidak mencukupi, pengulangan sering berlaku. Pada ketika ini, kita boleh mengawal cara imej latar belakang berulang dengan menetapkan atribut ulangan latar belakang. Atribut ulangan latar belakang mempunyai empat nilai atribut:

(1) ulang: nilai lalai, imej latar belakang akan berulang secara mendatar dan menegak
(2) ulang-x: imej latar belakang hanya akan muncul dalam Ulang dalam arah mendatar, tetapi bukan dalam arah menegak;
(3) ulang-y: Imej latar belakang hanya berulang dalam arah menegak, bukan dalam arah mendatar; imej latar belakang tidak berulang sama sekali.

Dengan menetapkan nilai atribut background-repeat kepada no-repeat, anda boleh menghalang latar belakang HTML daripada berulang.

html {

background-image:url("background.jpg");
background-repeat:no-repeat;
}

Gunakan latar belakang -size attribute

Jika imej terlalu kecil, tetapi kita tidak mahu imej latar belakang meregang dan berubah bentuk, tetapi mahu ia dipusatkan dan memenuhi keseluruhan skrin, kita boleh menggunakan latar belakang -atribut saiz. Atribut saiz latar belakang mempunyai dua nilai pilihan:

(1) penutup: Imej latar belakang diskalakan secara berkadar untuk memastikan imej itu meliputi keseluruhan bekas, tetapi sebahagian daripada imej mungkin dipangkas.

(2) mengandungi: Imej latar belakang diskalakan secara berkadar untuk memastikan imej itu dipaparkan sepenuhnya di dalam bekas.

html {

background-image:url("background.jpg");
background-size:cover;
background-repeat:no-repeat;
}

Gunakan atribut lampiran latar belakang

Jika imej latar belakang besar dan kami mahu pengguna dapat melihatnya sepanjang masa semasa menatal halaman, maka kami boleh gunakan atribut lampiran latar belakang. Atribut lampiran latar belakang mempunyai dua nilai:

(1) tatal: nilai lalai, imej latar belakang akan bergerak dengan kandungan apabila menatal

(2) tetap: imej latar belakang tidak bergerak dengan menatal .

html {

background-image:url("background.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}

Ringkasan

Setakat ini, kami telah memperkenalkan tiga kaedah untuk menjadikan latar belakang HTML tidak berulang. Sudah tentu, kita juga boleh menggunakan kaedah lain untuk mencapai latar belakang yang tidak berulang. Sebagai contoh, gunakan sifat klip latar belakang CSS3 untuk meletakkan imej latar belakang pada sudut bekas supaya ia memenuhi seluruh bekas tanpa pendua. Ringkasnya, tidak kira kaedah yang digunakan, kami boleh menjadikan halaman web kami lebih cantik dan profesional, serta membawa pengalaman yang lebih baik kepada pengguna.

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