简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

background-repeat 怎么使用

不言
Lepaskan： 2019-02-12 17:41:02
asal
5059 orang telah melayarinya

我们知道background属性是用于设置背景的，那么background-repeat属性怎么使用呢？本篇文章就来给大家介绍一下background-repeat属性的使用方法。

CSS

background-repeat属性设置是否及如何重复背景图像，也就是定义了图像的平铺模式。默认地，背景图像在水平和垂直方向上重复。

background-repeat属性的设置从原图像开始重复，原图像由background-image定义，并根据background-position的值放置。

注意：背景图像的位置是根据background-position属性设置的。如果未规定background-position属性，图像会被放置在元素的左上角。

下面我们就来看具体的示例

<html>
<head>
<style type="text/css">
body
{ 
background-image: url(img/mouse.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
Salin selepas log masuk

效果如下：横向平铺，因为没有设置background-position，所以图像是从左上角开始重复的。

微信截图_20190212164712.png

如果你想要纵向平铺，你可以设置background-repeat: repeat-y;，从特定位置平铺可以设置background-position属性。

本篇文章到这里就全部结束了，更多精彩内容大家可以关注php中文网的其他相关栏目教程！！！

Atas ialah kandungan terperinci background-repeat 怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
background-repeat
sumber：php.cn
Artikel sebelumnya：@charset规则怎么用 Artikel seterusnya：CSS的+(加号)选择器怎么用
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kuasai penggunaan pembolehubah Quasar dalam gaya scss Saya mengkonfigurasi projek Vue3+Quasar melalui vueaddquasar. Saya tidak faham cara menggu...
daripada 2023-11-04 21:05:29
0
1
304
Skala sprite CSS kepada imej latar belakang: panduan .my-sprite{background-image:url("https://i.stack.imgur.com/lJpW8.png");height:10...
daripada 2023-11-02 10:39:28
0
2
288
Mengapakah ketinggian 100% berfungsi tanpa pengisytiharan DOCTYPE? Ini ialah kod lengkap: <!DOCTYPEHTML><html><bodystyle="height:100%;pad...
daripada 2023-10-26 10:39:42
1
2
209
Bagaimana untuk mendapatkan garis besar bulat pada <button> bulat menggunakan CSS dalam Safari Saya cuba mendapatkan butang bulat dengan garis besar warna yang sama, tetapi ia nampaknya...
daripada 2023-10-26 09:54:54
0
2
604
Bagaimana untuk menjadikan baris terakhir item menggunakan ruang yang tinggal dalam Grid CSS? Adakah terdapat cara untuk memaksa semua item dalam baris terakhir grid mengisi baris itu,...
daripada 2023-10-20 20:39:37
0
1
321
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！