范仁义css3课程---34、背景4（ 背景简写属性 ）
一、总结
一句话总结：
背景的简写属性为"background"，属性值的顺序为：background-color、background-image、background-repeat、background-attachment、background-position
body {background:#ffffff url('img_tree.png') no-repeat right top;}
二、背景简写属性
博客对应课程的视频位置：34、背景4（ 背景简写属性 ）
https://www.fanrenyi.com/video/10/76
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景4（ 背景简写属性 ）</title> 6 <style> 7 .box1{ 8 width: 800px; 9 height: 1600px; 10 /*background-color: #ff4f81;*/ 11 /*background-image: url("../imgs/c8_1.png");*/ 12 /*background-repeat: no-repeat;*/ 13 /*background-attachment: fixed;*/ 14 /*background-position: 200px 200px;*/ 15 background:#ff4f81 url("../imgs/c8_1.png") no-repeat 200px 200px; 16 } 17 </style> 18 </head> 19 <body> 20 <!-- 21 背景的简写属性就是 background 22 需要用几个属性就写几个属性就可以了 我们没写的属性默认会用默认值 23 24 --> 25 <div class="box1"> 26 <div>div1</div> 27 <div>div2</div> 28 <div>div3</div> 29 <div>div4</div> 30 <div>div5</div> 31 <div>div6</div> 32 <div>div7</div> 33 <div>div8</div> 34 <div>div9</div> 35 <div>div10</div> 36 <div>div11</div> 37 <div>div12</div> 38 <div>div13</div> 39 <div>div14</div> 40 <div>div15</div> 41 <div>div16</div> 42 <div>div17</div> 43 <div>div18</div> 44 <div>div19</div> 45 <div>div20</div> 46 <div>div21</div> 47 <div>div22</div> 48 <div>div23</div> 49 <div>div24</div> 50 <div>div25</div> 51 </div> 52 </body> 53 </html>