CSS3中background-size实现配景图片大小可自定义的几种结果（代

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

本文目标：

1、把握background-size背景图片大小的几种设定办法

问题：

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

实现效果.png

附加说明：

1、背景图片大小本身是500*300大小

2、div容器宽度600*300大小

3、要求团体居中显示

此刻来详细操纵

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

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

思绪剖析：

1、目标由5个div组成，每个div的背景图片都是一样的，只不外背景图片的显现方式不一样

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景图片大小background-size演示</title>
</head>
<body>
    <div class="container">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩大到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

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

思绪剖析：

1、.container *

思绪剖析

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

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

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

2、.demo

思绪剖析：

1、按照要求得知宽600，高300，所以转成代码即width:600px;height:300px;背景图片是爱莎，且不反复所以background: url(../images/as.jpg) no-repeat;带边框所以

border: 1px solid #999;要居中所以margin: 0 auto 10px auto;

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

.demo {
    background: url(../images/as.jpg) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}

3、标题h4

思绪剖析：

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

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

h4{
    text-align: center;
}

4、5种不一样的显示方式

思绪剖析：

1、第一种方式就是默许的方式，就是背景图片多大，就显示多大

2、第二种方式就是自定义牢固宽高的方式显示，要求背景图片依照宽300，高100显示

3、第三种方式就是依照自定义百分比的方式显示，要求依照背景图片容器div的宽*80%,高*60%显示（即背景图片终究宽=600*80%=480,高=300*60%=180）

4、第四种方式就是让背景图片填充整个div，这里要留意的是，假如背景图片宽<容器的宽，那么背景图片就会等比例增长，直到填满了容器，假如高度增长到大于容器的高度，那么超出容器的部分就会被潜藏，只显示容器大小的部分

5、第五种方式就是将背景图片等比缩放至某一条边填满了容器的一条边为止

这里要要留意一点，除了第2种，第三种，不是等比例扩展图片，其他的几个都是等比例扩展背景图直到相符前提即休止扩展

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

.bg1 {
    background-size: auto;
}

.bg2 {
    background-size: 300px 100px;
}

.bg3 {
    background-size: 80% 60%;
}

.bg4 {
    background-size: cover;
}

.bg5 {
    background-size: contain;
}

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

.container *{
    padding:0;
    margin: 0;
}
.demo {
    background: url(../images/as.jpg) no-repeat;
    width: 600px;
    height: 300px;
    border: 1px solid #999;
    margin: 0 auto 10px auto;
}
h4{
    text-align: center;
}
.bg1 {
    background-size: auto;
}

.bg2 {
    background-size: 300px 100px;
}

.bg3 {
    background-size: 80% 60%;
}

.bg4 {
    background-size: cover;
}

.bg5 {
    background-size: contain;
}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片大小background-size演示</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <h4>原样显示背景图片</h4>
        <div class="demo bg1"></div>
        <h4>300宽和100高显示背景图片</h4>
        <div class="demo bg2"></div>
        <h4>80%宽和60%高显示背景图片</h4>
        <div class="demo bg3"></div>
        <h4>背景图片填充整个容器</h4>
        <div class="demo bg4"></div>
        <h4>背景图片扩大到容器的一边即可</h4>
        <div class="demo bg5"></div>
    </div>
</body>
</html>

运转结果如下：

实现效果.png