CSS3之背景尺寸Background-size
2013-10-14 08:51
477 查看
CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。下面就想来看下有关CSS3 之背景尺寸Background-size的介绍吧。
一、Background-size的语法
1、Background-size的语法
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的兼容情况
2、Background-size的兼容写法
三、Background-size的例子(在谷歌浏览器下看哟)
1、图片放大缩小
CSS代码:
HTML代码:
预览效果:
(1)初始状态:
(2)hover的状态:
2、图片contain和cover的效果
CSS代码:
HTML代码:
预览效果:
(1)初始状态:
(2)hover的状态
CSS3之背景尺寸Background-size就为大家介绍到这里了,很简单的小属性,这只是CSS3新加的背景属性之一,更多有关CSS3的小属性尽在梦龙小站,跟多有关CSS3的其他内容欢迎大家关注梦龙小站有关CSS3的更新。
一、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的兼容情况
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)初始状态:
(2)hover的状态:
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)初始状态:
(2)hover的状态
CSS3之背景尺寸Background-size就为大家介绍到这里了,很简单的小属性,这只是CSS3新加的背景属性之一,更多有关CSS3的小属性尽在梦龙小站,跟多有关CSS3的其他内容欢迎大家关注梦龙小站有关CSS3的更新。
相关文章推荐
- CSS3background-size背景图片尺寸属性
- CSS3之背景尺寸Background-size使用介绍
- CSS3:background-size背景图片尺寸属性
- CSS3background-size背景图片尺寸属性
- CSS3基础教程:详解background-size 控制背景图的尺寸[转]
- CSS3background-size背景图片尺寸属性
- CSS3:background-size背景图片尺寸属性
- CSS3:background-size背景图片尺寸属性
- CSS3 background-size让背景图寸尺大小可控
- CSS3背景:background-origin、background-clip、 background-size、multiple backgrounds、制作导航菜单综合练习题
- CSS3 背景 background-size
- css3 背景图片 background-size
- css3基础 background-size 背景缩放
- css3的一个控制背景的属性,background-size可以缩放大小啦
- CSS3 background-size让背景图寸尺大小可控
- css 背景图片尺寸设置 background-size
- css3中背景尺寸background-size详解
- css3新增背景属性background-clip/background-origin/background-size
- css3背景属性 background-size 对背景图进行缩小放大
- HTML&CSS——CSS3 Background-size