Gunakan CSS untuk mencapai kesan jubin imej latar belakang

Gunakan CSS untuk mencapai kesan jubin imej latar belakang
Dalam reka bentuk web, kesan jubin imej latar belakang adalah keperluan reka bentuk biasa. Kesan jubin imej latar belakang boleh dicapai dengan mudah melalui CSS Artikel ini akan memperkenalkan beberapa kaedah pelaksanaan biasa dan melampirkan contoh kod tertentu.

1 Ulang jubin (ulang)

Cara paling mudah untuk menjubin imej latar belakang adalah melalui atribut ulangan, yang membolehkan imej latar belakang tidak terhingga dalam kedua-dua arah mendatar dan menegak .

Contoh kod:

body {
  background-image: url("bg.jpg");
  background-repeat: repeat;
}

Kod di atas menetapkan imej latar belakang "bg.jpg" kepada jubin berulang, iaitu imej latar belakang akan muncul berulang kali pada keseluruhan halaman.

2. Jubin mendatar (ulang-x)

Kadang-kadang kita mahu imej latar belakang diulang jubin hanya dalam arah mendatar, tetapi tidak dalam arah menegak. Ini boleh dicapai menggunakan atribut repeat-x.

Contoh kod:

body {
  background-image: url("bg.jpg");
  background-repeat: repeat-x;
}

Kod di atas menetapkan imej latar belakang "bg.jpg" untuk dijubin berulang kali dalam arah mendatar dan hanya dipaparkan sekali dalam arah menegak.

3. Jubin menegak (ulang-y)

Serupa dengan jubin mendatar, kadang-kadang kita hanya mahu mengulang imej latar dalam arah menegak. Ini boleh dicapai menggunakan atribut repeat-y.

Contoh kod:

body {
  background-image: url("bg.jpg");
  background-repeat: repeat-y;
}

Kod di atas menetapkan imej latar belakang "bg.jpg" hanya dijubin berulang kali dalam arah menegak dan hanya dipaparkan sekali dalam arah mendatar.

4. No-repeat

Selain jubin berulang, anda juga boleh menggunakan atribut no-repeat untuk menetapkan imej latar belakang supaya tidak dijubin dan hanya dipaparkan sekali .

Contoh kod:

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

Kod di atas menetapkan imej latar belakang "bg.jpg" kepada tidak berjubin dan hanya dipaparkan sekali.

5. Kawalan kesan jubin

Sebagai tambahan kepada kaedah jubin asas di atas, kita juga boleh mengawal kedudukan imej latar belakang pada halaman melalui atribut kedudukan latar belakang .

Contoh kod:

body {
  background-image: url("bg.jpg");
  background-repeat: repeat;
  background-position: center top;
}

Kod di atas menetapkan imej latar belakang pada kedudukan yang berpusat secara mendatar pada halaman dan dijajarkan secara menegak di bahagian atas.

6. Ringkasan

Melalui contoh kod di atas, kita boleh dengan mudah mencapai kesan jubin imej latar belakang, sama ada jubin berulang, jubin mendatar, jubin menegak atau Mengawal kedudukan jubin boleh dicapai dengan mudah melalui CSS. Apabila mereka bentuk halaman web, penggunaan rasional kesan jubin imej latar belakang boleh meningkatkan keindahan dan pengalaman pengguna halaman tersebut.

Atas ialah kandungan terperinci Gunakan CSS untuk mencapai kesan jubin imej latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!