css3中背景尺寸background-size详解


Posted in HTML / CSS onSeptember 02, 2014

定义:规定背景图像的尺寸

background-size的类型

background-size需要两个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外。

浏览器支持:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+

JavaScript语法:object.style.backgroundSize="60px 80px"

语法:

background-size: <bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
例如:

复制代码
代码如下:

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;//有多个图像
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

使用<length>|<percentage>时,第一个值是指背景图像的width,第二个指背景图像的height,如果只有一个值,height就为auto
使用percentage注意:width和height是针对于背景区域,不是背景图像大小。

cover:背景图像缩放,保留图像原有的比例/长宽比,不管背景图像大于还是小于背景区域,都会覆盖背景区域,图像的宽度或高度等于或超过背景区域,再次,根据背景图像的比例是否匹配的背景区域,背景图像的某些部分可能不在背景区域内。

contain:背景图像缩放,同时保留图像原有的比例/长宽比,无论是图像的宽度或高度超过背景区域,以尽可能大的覆盖背景区域。因此,根据背景图像的比例是否匹配背景区域,可能会有一些背景图像覆盖不到背景地区。

HTML / CSS 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
You might like
类的另类用法--数据的封装
2006/10/09 PHP
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
js点击选择文本的方法
2015/02/09 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
python删除列表内容
2015/08/04 Python
Python3多线程操作简单示例
2018/05/22 Python
Python可迭代对象操作示例
2019/05/07 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
药剂学专业应届生自荐信
2013/09/29 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
教师现实表现材料
2014/02/14 职场文书
《胡杨》教学反思
2014/02/16 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
奖学金个人总结
2015/03/04 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
东京审判观后感
2015/06/01 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript