CSS3中background-image实现多背景图片（代码实例）(2)-木庄网络博客

所以index.css中添加代码如下：

.bg1 {
    background-position: left top, 350px 0, 700px 0;
}
 
.bg2 {
    background-position: left top, 300px 0, 700px 0;
}
 
.bg3 {
    background-position: left top, 400px 0, 700px 0;
}

到此为止，index.css的全部内容如下：

.container *{
    padding:0;
    margin:0;
}
h4{
    text-align: center;
}
.demo {
    width: 1000px;
    height: 300px;
    border: 1px solid #999;
    background-image: url(../images/gtl1.jpg),
        url(../images/gtl2.jpg),
        url(../images/gtl3.jpg);
 
    background-repeat: no-repeat, no-repeat, no-repeat;
    margin: 0 auto 20px auto;
}
 
.bg1 {
    background-position: left top, 350px 0, 700px 0;
}
 
.bg2 {
    background-position: left top, 300px 0, 700px 0;
}
 
.bg3 {
    background-position: left top, 400px 0, 700px 0;
}

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>多重背景</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
 
<body>
    <div class="container">
        <h4>效果1</h4>
        <div class="demo bg1"></div>
        <h4>效果2</h4>
        <div class="demo bg2"></div>
        <h4>效果3</h4>
        <div class="demo bg3"></div>
    </div>
 
</body>
 
</html>