5-4 CSS3背景 multiple backgrounds
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3背景 multiple backgrounds

多重背景,也就是CSS2里background的属性外加originclipsize组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

语法缩写如下:

background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式:

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意:

  1. 用逗号隔开每组 background 的缩写值;
  2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
  3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
  4. background-color 只能设置一个

举例:

有三张单独的图片:

使用多背景技术实现:

具体代码实现,查看右侧代码编辑器(12-16行)。

任务

在右侧代码编辑器窗口的第25-26行,输入正确内容实现如下图效果:


备注:这一小节没有正确性验证,请查看结果窗口与任务所给的结果图片是否一致,从而判断输入代码是否正确。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>多重背景</title>
  6. <style type="text/css">
  7. .demo{
  8. width: 300px;
  9. height: 140px;
  10. border: 1px solid #999;
  11.  
  12. background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg),
  13. url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg),
  14. url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg);
  15. background-position: left top, 100px 0, 200px 0;
  16. background-repeat: no-repeat, no-repeat, no-repeat;
  17.  
  18. margin:0 0 20px 0;
  19. }
  20. .task {
  21. width: 300px;
  22. height: 140px;
  23. border: 1px solid #999;
  24.  
  25. background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat,
  26. url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
  27.  
  28. }
  29.  
  30.  
  31. </style>
  32. </head>
  33. <body>
  34. <div class="demo"></div>
  35. <div class="task"></div>
  36. </body>
  37. </html>
下一节