CSS3：用CSS设置多个背景、背景渐变、指定背景大小

浏览数：22 / 时间：2015年06月09日

http://blog.csdn.net/net_lover/article/details/5212026

CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性有：

属性名	可能的值	默认值
background	是一种简写方式：bg-image \|\| bg-position \|\| / bg-size \|\| repeat-style \|\| attachment \|\| bg-origin，最后一个背景层可以设置background-color
background-attachment	scroll \| fixed \| local	scroll
background-clip	border-box \| padding-box 表示背景渲染的方法：padding box表示背景在padding box内渲染；border-box表示背景在border-box内渲染	border-box
background-color	<color>	transparent
background-image	image \| none 可以设置多个背景图，以逗号（,）分隔开。none也代表一个背景层	none
background-origin	border-box \| padding-box \| content-box 背景相对的位置，相对于上面3个值中的一个。	padding-box
background-position	% length top right bottom left center 这些属性的设置方法跟以前类似	0% 0%
background-repeat	repeat-x \| repeat-y \| [repeat \| space \| round \| no-repeat]{1,2} 平铺方式	repeat
background-size	[length \| % \| auto ]{1,2} \| cover \| contain 设置背景的大小。contain表示按比例缩放占据最大高度或者宽度的背景；cover表示铺满整个背景。	auto

下面我们以5个例子来说明一些新的CSS3的功能。其中，CSS3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中写的顺序来定，最先写的背景在最上层。

CSS 代码

background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;

是背景的简写方式，除了默认值之外，等效于下面的写法：

CSS 代码

background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;

另外一个需要注意的是：背景渐渐也是一个背景层，所以在例子4中

CSS 代码

background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");

的写法顺序不能颠倒，如果写成

CSS 代码

background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),
-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0));

就看不出渐变效果了。

例子的全部源代码如下：

XML/XHTML 代码

< style type ="text/css" >
div{font-size:24px;font-weight:bo;d;color:#f00;text-align:right;margin:10px 0;}
#div1
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
}

#div2
{
height:400px;width:600px;
border:4px solid orange;
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
                     url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
                     url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;

}

#div3
{
height:100px;width:600px;
border:4px solid orange;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}

#div4
{
height:100px;width:600px;
border:4px solid orange;
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1),  rgba(255, 0, 0, 0)),
                                    url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
}

#div5
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
-moz-background-size:cover;
background-repeat:no-repeat;
}

</ style >
< div id ="div1" > div1 </ div >
< div id ="div2" > div2 </ div >
< div id ="div3" > div3 </ div >
< div id ="div4" > div4 </ div >
< div id ="div5" > div5 </ div >

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS3：用CSS设置多个背景、背景渐变、指定背景大小