用CSS设立多个背景、背景渐变、指定背景大小
日期：2014-05-17 浏览次数：20881 次
用CSS设置多个背景、背景渐变、指定背景大小
| 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 代码
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->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;
???????????????????? 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 代码
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->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;??
background-repeat: no-repeat, no-repeat, no-repeat;??
background-position: 0 0, 200px 0, 400px 201px;??
??另外一个需要注意的是：背景渐渐也是一个背景层，所以在例子4中
CSS 代码
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->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");
????????????????????????????????????url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
?的写法顺序不能颠倒，如果写成
CSS 代码
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freew
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
