原码笔记

原码笔记

css3背景_动力节点Java学院整理

小诸哥 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
<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中写的顺序来定，最先写的背景在最上层。

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

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

  1. 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");
  2. background-repeat: no-repeat, no-repeat, no-repeat;
  3. background-position: 0 0, 200px 0, 400px 201px;

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

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

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

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

就看不出渐变效果了。

例子的全部源代码如下：

  1. < style type ="text/css" >
  2. div{font-size:24px;font-weight:bo;d;color:#f00;text-align:right;margin:10px 0;}
  3. #div1
  4. {
  5. height:400px;width:600px;
  6. border:4px solid orange;
  7. 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");
  8. background-repeat: no-repeat, no-repeat, no-repeat;
  9. background-position: 0 0, 200px 0, 400px 201px;
  10. }
  11.  
  12. #div2
  13. {
  14. height:400px;width:600px;
  15. border:4px solid orange;
  16. background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
  17.                      url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
  18.                      url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;
  19.  
  20. }
  21.  
  22. #div3
  23. {
  24. height:100px;width:600px;
  25. border:4px solid orange;
  26. background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  27. }
  28.  
  29. #div4
  30. {
  31. height:100px;width:600px;
  32. border:4px solid orange;
  33. background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
  34.                      url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
  35. }
  36.  
  37. #div5
  38. {
  39. height:400px;width:600px;
  40. border:4px solid orange;
  41. background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
  42. -moz-background-size:cover;
  43. background-repeat:no-repeat;
  44. }
  45.  
  46. </ style >
  47. < div id ="div1" > div1 </ div >
  48. < div id ="div2" > div2 </ div >
  49. < div id ="div3" > div3 </ div >
  50. < div id ="div4" > div4 </ div >
  51. < div id ="div5" > div5 </ div >

标签： css3背景 动力节点

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇CSS鼠标悬浮DIV后显示DIV外的按钮解决方法

下一篇sass简介_动力节点Java学院整理

相关文章