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使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
css3带你实现3D转换效果
Feb 24 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
php学习之function的用法
2012/07/14 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
Js获取事件对象代码
2010/08/05 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python距离测量的方法
2018/03/06 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python多线程抽象编程模型详解
2019/03/20 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
医院节能减排方案
2014/06/13 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
实验心得体会
2014/09/05 职场文书
小学生运动会报道稿
2014/09/12 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
Moment的feature导致线上bug解决分析
2022/09/23 Javascript