用CSS设立多个背景、背景渐变、指定背景大小

2012-11-12

用CSS设置多个背景、背景渐变、指定背景大小属性名可能的值默认值background是一种简写方式：bg-image || bg-

用CSS设置多个背景、背景渐变、指定背景大小
属性名可能的值默认值background是一种简写方式：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最后一个背景层可以设置background-color?background-attachmentscroll | fixed | localscrollbackground-clipborder-box | padding-box
表示背景渲染的方法：padding box表示背景在padding box内渲染；border-box表示背景在border-box内渲染border-boxbackground-color<color>transparentbackground-imageimage | none
可以设置多个背景图，以逗号（,）分隔开。none也代表一个背景层nonebackground-originborder-box | padding-box | content-box
背景相对的位置，相对于上面3个值中的一个。padding-boxbackground-position% length top right bottom left center
这些属性的设置方法跟以前类似0% 0%background-repeatrepeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
平铺方式repeatbackground-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:bold;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>

以上例子的最终显示效果如下图所示（如果图片不能显示，请直接点击链接查看）。查看本例子的效果需要Firefox 3.6，Chrime，Safari4的浏览器。其中 Firefox 3.6可以看到全部的效果。

/uploadfile/jiaocheng/2014/0125/201401251817083133.jpg??

用CSS设立多个背景、背景渐变、指定背景大小

热点排行