Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan mod jubin imej dalam css
Bagaimana untuk menetapkan mod jubin imej dalam css
- 青灯夜游asal
- 2021-11-10 17:17:2216989semak imbas
Dalam css, anda boleh menggunakan atribut ulangan latar belakang untuk menetapkan kaedah jubin imej Apabila nilai "ulang", latar belakang boleh dijubin sepenuhnya dijubin secara mendatar apabila ia "ulang" -y" boleh dijubin secara menegak, dan "tidak diulang" tidak boleh dijubin (imej hanya akan dipaparkan sekali).
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam css, anda boleh menggunakan atribut ulangan latar belakang untuk menetapkan kaedah jubin imej.
Atribut ulangan latar belakang mentakrifkan mod jubin imej dan menetapkan sama ada dan cara mengulang imej latar belakang.
Atribut ulangan latar belakang boleh menetapkan empat mod jubin:
1 Apabila nilai "ulang", latar belakang boleh dijubin sepenuhnya
repeat: Lalai. Imej latar belakang akan berulang secara menegak dan mendatar.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>
2 Apabila nilai ialah "repeat-x", ia boleh dijubin secara mendatar
repeat-x: Hanya kedudukan mendatar akan. ulangi imej latar belakang
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat-x;
}
3 Apabila nilai adalah "repeat-y", ia boleh dijubin secara menegak
repeat-y: Sahaja. kedudukan menegak akan mengulangi imej latar belakang
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:repeat-y;
}
4 Apabila nilai "tidak berulang", ia tidak akan dijubin
tidak -ulang: imej latar belakang hanya akan dipaparkan sekali
div {
width: 500px;
height: 500px;
border: 2px solid red;
background-image: url(img/nz.png);
background-repeat:no-repeat;
}
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan mod jubin imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!