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教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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
isset和empty的区别
2007/01/15 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python矩阵的转置和逆转实例
2018/12/12 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
金士达面试非笔试
2012/03/14 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
企业安全生产责任书
2014/04/14 职场文书
求职信标题怎么写
2014/05/26 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
房产遗嘱范本
2015/08/06 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python