background-size
程序员文章站
2022-06-16 08:22:06
...
background-size
CSS属性这个
background-size
属性有几个预定义的值,但也可以像其它size属性一样使用数字:
- contain: 包含,整个背景图都要被包含在元素内,没有超出的部分。
- cover: 覆盖,背景要覆盖元素的所有区域,不能有空白出现。
- 长度/百分比: 数字值
不管你相信与否,这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下
background-size
的几种不同用法:
/* base header classes */
#header {
/* header dimension! */
height: 350px;
/* additional background properties */
background-repeat: no-repeat;
background-position: center center;
/* some box shadow for good fun */
-webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
-moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}
/* 覆盖 cover */
#header.flex {
/* size matters */
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/* 包含 contain */
#header.flex {
/* size matters */
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
/* flex, fun */
#header.flex {
/* size matters */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
}
background-size
神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化,当有resize事件发生时,页面会出现不可预测的变化。但background-size
却能根据客户端浏览器的大小自我的调整适应。background-size
在火狐浏览器, Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。
推荐阅读
-
CSS3之背景尺寸Background-size使用介绍
-
css设置全屏背景图,background-size 属性
-
css3中背景尺寸background-size详解
-
CSS3属性background-size使用指南
-
background-size 设置背景图片的大小_html/css_WEB-ITnose
-
background-size
-
css background-size 属性_html/css_WEB-ITnose
-
背景图片的位置及大小,background-size属性讲解
-
说说background-size:cover;与background-size:contain的区别
-
IE11 transition background-size 失效_html/css_WEB-ITnose