css3情况

2021-01-20 18:26 jianzhan

CSS3标准中对情况这1一部分，新添加了1些让人激动的作用，如能够设定好几个情况照片、能够特定情况尺寸、设定情况渐变色等作用。CSS3标准中界定的情况特性有：

特性名
将会的值
默认设置值
background
是1种简写方法：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最终1个情况层能够设定background-color
 
background-attachment
scroll | fixed | local
scroll
background-clip
border-box | padding-box 表明情况3D渲染的方式：padding box表明情况在padding box内3D渲染；border-box表明情况在border-box内3D渲染
border-box
background-color
<color>
transparent
background-image
image | none 能够设定好几个情况图，以逗号（,）隔开开。none也意味着1个情况层
none
background-origin
border-box | padding-box | content-box 情况相对性的部位，相对上面3个值中的1个。
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个事例来讲明1些新的CSS3的作用。在其中，CSS3容许设定好几个情况照片，每一个情况照片占1层，层的左右依照在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;

是情况的简写方法，除默认设置值以外，等效于下面的写法：

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;

此外1个必须留意的是：情况逐渐也是1个情况层，因此在事例4中

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);

的写法次序不可以错乱，假如写成

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));

就看不出渐变色实际效果了。

事例的所有源码以下： 

< 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 >

为您推荐