本文主要描述css3关于背景图片重复显示新增的属性;
什么也不设置时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 550px;
height: 550px;
background-image: url("./心.png");
}
</style>
</head>
<body>
<div></div>
</body>
</html>
新增 background-repeat: round 使图片在重复的同时能够完整的显示,同时也对图片大小进行调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 550px;
height: 550px;
background-image: url("./心.png");
/*改变图片大小以至于重复时能够完整的显示图片*/
background-repeat: round;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
新增background-repeat: space;使图片在重复时完整显示,增加图片件的间隔,不拉伸图片;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 550px;
height: 550px;
background-image: url("./心.png");
/*大小不变 在图片之前增加等量间距*/
background-repeat: space;
}
</style>
</head>
<body>
<div></div>
</body>
</html>