CSS 背景尺寸 background-size属性

在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 所示：

图4-33 background-size属性效果

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

关于作者

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

CSS 背景尺寸 background-size属性相关推荐

CSS背景（background）
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点背景附着背景简写背景透明(CSS3) 背景总结理解背景 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
css 背景颜色 background属性
背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...
CSS背景（background）篇
1. background概述 CSS 可以添加背景颜色和背景图片,以及来进行图片设置. 属性描述 background-color: 背景颜色 background-image: 背景图片地址 b ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
CSS背景图片background如何改变大小以及样式设置
background-color 使用的背景色 background-size 背景图片的尺寸. background-size: length|percentage|cover|contain; b ...
html5 固定背景,css 背景固定样式background-attachment属性基础
一.background-attachment属性在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动. 语法: background-at ...
背景（background）属性
background(背景属性) background-attachment:背景图像是否固定或者随着页面的其余部分滚动 scroll:背景图片随着页面的其余部分滚动 fixed:背景图片是固定的 i ...

CSS 背景尺寸 background-size属性

CSS 背景尺寸 background-size属性相关推荐

最新文章

热门文章