CSS3之背景尺寸Background-size使用介绍


Posted in HTML / CSS onOctober 14, 2013

CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。

一、Background-size的语法
1、Background-size的语法

复制代码
代码如下:

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

2、Background-size的属性值
1、auto:此值为默认值,保持背景图片的原始高度和宽度;
2、number:此值设置具体的值,可以改变背景图片的大小;
3、percentage:此值为百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4、cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又无法使用background-repeat来实现时,我们就可以采用cover;将背景图片放大到适合容器的大小,但这种方法会使用背景图片失真;
5、contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器,这个主要运用在,当背景图片大于元素容器时,而又需要将背景图片全部显示出来,此时我们就可以使用contain将图片缩小到适合容器大小为止,这种方法同样会使用图片失真。
当background-size取值为number和percentage时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而会与第一个值相同。

二、Background-size的兼容
1、Background-size的兼容情况
CSS3之背景尺寸Background-size使用介绍
2、Background-size的兼容写法

复制代码
代码如下:

/*Mozilla*/
-moz-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*Webkit*/
-webkit-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*Oprea*/
-o-background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
/*W3c标准*/
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

三、Background-size的例子(在谷歌浏览器下看哟)
1、图片放大缩小
CSS代码:

复制代码
代码如下:

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:20px 20px;
}
.box:hover{
background-size:200px 200px;
}

HTML代码:
复制代码
代码如下:

<div class="box"></div>

预览效果:
(1)初始状态:
CSS3之背景尺寸Background-size使用介绍
(2)hover的状态:
CSS3之背景尺寸Background-size使用介绍
2、图片contain和cover的效果
CSS代码:
复制代码
代码如下:

.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:cover;
}
.box:hover{
background-size:contain;
}

HTML代码:
复制代码
代码如下:

<div class="box"></div>

预览效果:
(1)初始状态:
CSS3之背景尺寸Background-size使用介绍
(2)hover的状态
CSS3之背景尺寸Background-size使用介绍
CSS3之背景尺寸Background-size就为大家介绍到这里了,很简单的小属性,这只是CSS3新加的背景属性之一,更多有关CSS3的小属性尽在梦龙小站,跟多有关CSS3的其他内容欢迎大家关注梦龙小站有关CSS3的更新。
HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 #HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 #HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
You might like
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
图片完美缩放
2006/09/07 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python3判断url链接是否为404的方法
2018/08/10 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
前处理班长职位说明书
2014/03/01 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
校长寄语大全
2014/04/09 职场文书
租车协议书范本
2014/04/22 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
小学教育见习总结
2015/06/23 职场文书
python munch库的使用解析
2021/05/25 Python