揭秘CSS(第 1 版)
4.5.6 背景尺寸
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景附着

背景位置

背景重复

背景图像

背景颜色

背景尺寸

在CSS3之前,我们不能指定背景图像的显示大小,一般是按图像的原始尺寸显示。在CSS3中,通过 background-size属性,可以设置背景图像的显示尺寸。

background-size属性的值可以是预定义关键字 cover | contain,也可以是使用长度值、百分比或 auto 定义背景图像的尺寸,长度和百分比不允许负值。

使用预定义值时,cover 表示背景图像完全覆盖容器的背景区域,如果图像过大或过小,则会将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器;contain 表示背景图像始终只填充容器的背景区域,如果图像过大或过小,也会对背景图像等比缩放。但是,当宽度与容器的宽度相等,或高度与容器的高度相等时,则停止缩放。所以,停止放大后,某个方向可能没有完全覆盖,则会显示背景颜色。

使用长度、百分比或 auto 定义尺寸时,需要提供两个参数。如果提供两个,第一个为背景图像的宽度,第二个为背景图像的高度;如果只提供一个,该值为背景图像的宽度,第 2 个值默认为 auto,即高度为 auto,背景图像按提供的宽度等比缩放。

这里对每个取值定义了一个类,然后分别应用到一个容器,来看看 background-size属性在不同取值下的表现。代码如下:

div { 
    width: 180px; 
    height: 120px;
    border: 10px dashed #888;
    background-repeat: no-repeat;
    background-image: url(img/bg.gif);
}
.cover {
     background-size: cover;
}
.contain {
    background-size: contain;
}
.size {
    background-size: 50% 50%;
}
<div class="cover"></div>
<div class="contain"></div>
<div class="size"></div>

上述代码的运行结果如图 4‑33 所示:

background-size属性效果
图4-33 background-size属性效果

从上图可以看出,属性取值 cover 时,背景图像要进行等比放大,以填满整个容器,为了适应容器的宽度,高度已经溢出到了边框的下面;取值 contain 时,背景图像进行等比放大,宽度到达容器的高度后,图像不再进行放大,故容器宽度有空白;使用尺寸时,图像为原始尺寸的 50%。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验