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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
Javascript面向对象编程
2012/03/18 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
全面了解js中的script标签
2016/07/04 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python requests指定出口ip的例子
2019/07/25 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
超级搞笑检讨书
2014/01/15 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
幽默导游词开场白
2015/05/29 职场文书
Django migrate报错的解决方案
2021/05/20 Python