CSS3属性background-size使用指南


Posted in HTML / CSS onDecember 09, 2014

以下内容摘自MDN。因时间原因没能好好整理学习,先引用下来,有时间时再细细整理。

background-size 设置背景图片大小。

复制代码
代码如下:

/* 关键字 */
background-size: cover
background-size: contain
/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗号分隔的多个值:设置多重背景 */
background-size: auto, auto /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit

Values
<length>
<length> 值,指定背景图片大小,不能为负值。
<percentage>
<percentage> 值,指定背景图片相对背景区(background positioning area)的百分比。背景区由background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。如果attachment 为fixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。
auto
以背景图片的比例缩放背景图片。
cover
缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
contain
缩放背景图片以完全装入背景区,可能背景区部分空白。
位图一定有固有尺寸与固有比例,矢量图可能两者都有,也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

背景图片大小计算

如果指定了 background-size 的两个值并且不是auto:
背景图片按指定大小渲染。
contain 或 cover:
保留固有比例,最大的包含或覆盖背景区。如果图像没有固有比例,则按背景区大小。
auto 或 auto auto:
图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例, 效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
一个为 auto 另一个不是auto:
如果图像有固有比例,则指定的长度使用指定值,未指定的长度由指定值与固有比例计算。如果图像没有固有比例,则指定的长度使用指定值,未指定的长度使用图像相应的固有长度,若没有固有长度,则使用背景区相应的长度。
注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+,以确定不同之处能否接受。

Examples
background-size: cover 演示 与  background-size: contain 演示 在新窗口打开,这样你可以看到当背景区大小变化时 contain 与 cover 是怎样的。 系列演示:background-size 及其与background-*属性的关联  很好的说明了单独使用 background-size 及与其它属性共同使用。

Notes
如果用渐变作为背景并且对它使用了background-size ,最好不要只用一个auto, 或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8有所改变, 并且目前各浏览器表现不一致,不是全部浏览器都完全支持 CSS3 background-size 规范 与 CSS3 Image Values gradient 规范。

复制代码
代码如下:

.bar {
width: 50px; height: 100px;
background-image: gradient(...);
/* 不推荐 */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* 可行 */
background-size: 25px 50px;
background-size: 50% 50%;
}

特别不推荐对渐变px与auto一起用, 因为Firefox 8之前不能重复渲染,并且对于没有实现Firefox 8渲染特性的浏览器,不知道指定了背景的元素的确切大小。

IE9及以上才支持。

HTML / CSS 相关文章推荐
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 #HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 #HTML / CSS
You might like
ThinkPHP分页类使用详解
2014/03/05 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
javascript jQuery插件练习
2008/12/24 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python条件和循环的使用方法
2013/11/01 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
华为的Java面试题
2014/03/07 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
大四学生思想汇报
2014/01/13 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
教师求职自荐书
2014/06/14 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
档案管理员岗位职责
2015/02/12 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python