背景图片不仅仅可以是一张,也可以是多张,这叫做多重背景图片。
格式:
1、简写
多个背景图片使用逗号来隔开。
例如:background: url("1.png") no-repeat 0px 0px,url("2.png") no-repeat 100px 0px,url("3.png") -100px 100px;
2、分开编写
例如:
background-image: url("1.png") ,url("2.png") ,url("3.png") ;
background-repeat: no-repeat,no-repeat,no-repeat;
background-position: 0px 0px,100px 0px,-100px 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 800px;
width: 800px;
border: 1px solid #000;
background: url("1.jpg") no-repeat 0px 0px, url("2.png") no-repeat top right;
}
.c2 {
height: 800px;
width: 800px;
border: 1px solid #000;
background-image: url("1.jpg"), url("2.png");
background-repeat: no-repeat, no-repeat;
background-position: 0 0, top right;
}
</style>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>