简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  background-repeat属性怎么用

background-repeat属性怎么用

青灯夜游
青灯夜游asal
2019-02-18 14:32:3210504semak imbas

CSS的background-repeat属性是用来设置背景图像如何平铺的。background-repeat:repeat-x表示只有水平位置会重复背景图像；background-repeat:repeat-y表示只有垂直位置会重复背景图像。

background-repeat属性怎么用

CSS  background-repeat属性

作用：设置是否及如何重复背景图像。

基本语法：

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat：默认值，背景图像将向垂直和水平方向重复。

repeat-x：只有水平位置会重复背景图像。

repeat-y：只有垂直位置会重复背景图像。

no-repeat：设置背景图片不会重复。

说明：background-repeat 属性定义了图像的平铺模式。从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

CSS  background-repeat属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3>repeat设置背景图片向垂直和水平方向重复</h3>
<div class="demo1"></div>
<h3>no-repeat设置背景图片不重复</h3>
<div class="demo2"></div>
<h3>repeat-x设置背景图片向水平方向重复</h3>
<div class="demo3"></div>
<h3>repeat-y设置背景图片向垂直方向重复</h3>
<div class="demo4"></div>
</body>
</html>

效果图：

1550471326915227.jpg

1550471332509829.jpg

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

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

css position background
Kenyataan：
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 sebelumnya：background-position属性怎么用Artikel seterusnya：CSS3中的background-clip属性怎么用

Artikel berkaitan

Lihat lagi