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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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
ThinkPHP验证码使用简明教程
2014/03/05 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
js 异步处理进度条
2010/04/01 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
使用js画图之饼图
2015/01/12 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
Python实现处理管道的方法
2015/06/04 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python中django学习心得
2017/12/06 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python实现整数的二进制循环移位
2019/03/08 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Pyqt5自适应布局实例
2019/12/13 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
模具设计与制造专业求职信
2014/07/19 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014个人年度工作总结
2014/12/15 职场文书
新教师个人总结
2015/02/06 职场文书
学会感恩主题班会
2015/08/12 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript