CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）(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>