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实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 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
php 无法载入mysql扩展
2010/03/12 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python对象体系深入分析
2014/10/28 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python实现操作文件(文件夹)
2019/10/31 Python
python绘制随机网络图形示例
2019/11/21 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python