CSS3中background-image实现多配景图片（代码实例）

发布时间：09/01 来源：未知浏览：关键词：

本文目标：

1、把握background-image多背景的实现

问题：

1、实现以下结果，使用纯DIV+CSS，必需使用background-image

实现效果.png

附加说明：

1、团体宽度是1000px，高300px，要求页面居中显示

2、背景图片宽，高均为300px

3、每张图片都是当做背景图片来显现的

此刻来详细操纵

1、预备素材：根名目创立images文件夹，把相关素材图片都存置与此，素材有

2、创立好index.html，写好架构，架构怎样剖析呢

思绪剖析：

1、目标由3个div组成，每个div的背景图片都是一样的，都是3张相片，只不外细心视察，就是第二张背景图片的位置显示不一样

2、每个div都带有一个标题

按照剖析，我们得出以下代码

<!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>

3、写样式，创立css文件夹，里面创建index.css，里面的样式如何写了，以下是剖析思绪

思绪剖析：

1、.container *

思绪剖析

1、为了设定容器里的所有元素的公共样式，我们可以将这些公共代码写入.container * 样式内

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

.container *{
    padding:0;
    margin:0;
}

2、h4标题

思绪剖析：

1、要求文本居中，所以转成代码即 text-align: center;、

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

h4{
    text-align: center;
}

3、.demo

思绪剖析：

1、按照要求得知宽1000，高300，所以转成代码即width:1000px;height:300px;背景图片不是一张是3张，且不反复所以

background-image: url(images/gtl1.jpg),
url(images/gtl2.jpg),
url(images/gtl3.jpg);

background-repeat: no-repeat, no-repeat, no-repeat;

带边框所以border: 1px solid #999;要居中且有上边距所以margin: 0 auto 20px auto;

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

.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;
}

4、3种不一样的背景位置设定

思绪剖析：

1、第一种方式是第一张背景图片靠最左边显示，第二张居中，此刻它的left值=(1000-300）/2=350，第三张在最右侧

2、第二种方式是第一张背景图片靠最左边显示，第二张紧受着第一张，此刻它的left值=第一张背景图片的宽度300，第三张在最右侧

3、第三种方式是第一张背景图片靠最左边显示，第二张紧受着第三张，此刻它的left值=1000-第二张+第三张的总体宽度=1000-600=400，第三张在最右侧

留意：假如都不设定background-positon默许都是靠左显示，那么会存在重叠的状况

所以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>

运转结果如下

实现效果.png