ITPub博客

首页 > Linux操作系统 > Linux操作系统 > CSS3尝鲜(二):用CSS设置多个背景、背景渐变、指定背景大小

CSS3尝鲜(二):用CSS设置多个背景、背景渐变、指定背景大小

原创 Linux操作系统 作者:孟子E章 时间:2010-01-19 11:21:23 0 删除 编辑

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 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的功能。其中
CSS 代码
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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 代码
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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 代码
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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));

CSS 代码
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->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 代码
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><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">div1div>
<div id="div2">div2div>
<div id="div3">div3div>
<div id="div4">div4div>
<div id="div5">div5div>

以上例子的最终显示效果如下图所示(如果图片不能显示,请直接点击链接查看)http://dotnet.aspx.cc/Images/mengxianhui_css3_3.jpg 

孟宪会

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/15723462/viewspace-625457/,如需转载,请注明出处,否则将追究法律责任。

下一篇: 没有了~
请登录后发表评论 登录
全部评论
暂无介绍

注册时间:2008-09-03

  • 博文量
    16
  • 访问量
    456809