您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

css3背景(七)—background-size

杨青青2013-08-02【CSS3|Html5】人已围观

简介background-size检索或设置对象的背景图像的尺寸大小。background-size在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

background-size

说明:background-size检索或设置对象的背景图像的尺寸大小。background-size在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

background-size语法:

background-size:<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值:auto

1)<length> | <percentage>  分别用长度值和百分比来指定图片的大小。不允许负值

2)auto   背景图像的真实大小。

3) cover   将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

4)contain   将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

提示:该属性提供2个参数值(特性值cover和contain除外)。如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。

兼容性:除IE9以下的版本都不支持该属性。Firefox4.0、Safari5.1、Chrome13.0、Opera11.50、IE9.0等及以上的版本都很好的支持了background-size属性

示例:

div{

background:url(bg.gif);

background-size:60px 100px;

-moz-background-size:60px 100px; /* 老版本的 Firefox ,请自行添加各个浏览器前缀 */

background-repeat:no-repeat;

}

 

cover 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

上例css代码片段:

p{

border:5px dashed #666;width:100px;height:150px;padding:20px;

background:url(/d/file/newshtml5/css/2013-08-02/998bcd4b292157e26c04e87825d75b9a.png) no-repeat; /* background-repeat和background-images的缩写*/

background-size:cover;

}

 

contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 background-size:contain 

 

自定义背景图像大小 background-size:100px 140px;

如果从前面的css3背景(一)开始你已经看到这篇,那css3背景的属性就基本上完了。要熟悉运用这些属性,还得不断的练习,记忆。下面总结一下,background的复合属性。

语法:

background:[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

相关属性:[ background-origin ] || [ background-clip ] || [ background-size ]

取值顺便再复习一次:

[ background-image ]: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”

[ background-repeat ]: 指定对象的背景图像如何铺排填充。

[ background-attachment ]: 指定对象的背景图像是随对象内容滚动还是固定的。

[ background-position ]: 指定对象的背景图像位置。

[ background-origin ]: 指定对象的背景图像显示的原点。

[ background-clip ]: 指定对象的背景图像向外裁剪的区域。

[ background-size ]: 指定对象的背景图像的尺寸大小。

示例:假设要在同一个元素上定义3个背景图像

缩写方式

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px 60px,50px 60px,50px 60px;

 

拆分方式

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat,no-repeat,no-repeat;

background-attachment:scroll,scroll,scroll;

background-repeat:10px 20px,50px 60px,90px 100px;

background-origin:content-box,content-box,content-box;

background-clip:padding-box,padding-box,padding-box;

background-size:50px 60px,50px 60px,50px 60px;

如果定义了多个背景图片,而其他属性只有一个参数值,则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写:

缩写方式

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px 60px;

 

拆分方式

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);

background-repeat:no-repeat;

background-attachment:scroll;

background-repeat:10px 20px,50px 60px,90px 100px;

background-origin:content-box;

background-clip:padding-box;

background-size:50px 60px;

 

Tags:css3   css3背景   background-size

很赞哦! ()

文章评论

站点信息

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:加我为好友

客服在线

服务时间

周一至周日 9:00-21:00