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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
初识Laravel
2014/10/30 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
js性能优化技巧
2015/11/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python set集合使用方法解析
2019/11/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
优秀毕业生自荐信范文
2014/01/01 职场文书
农贸市场管理制度
2014/01/31 职场文书
技术负责人任命书
2014/06/05 职场文书
国庆促销活动总结
2014/08/29 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
教师旷工检讨书
2015/08/15 职场文书