微信扫一扫打赏支持

范仁义css3课程---34、背景4（ 背景简写属性 ）

范仁义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>

 

 

 

 

 

 
posted @ 2020-02-11 05:51  范仁义  阅读(158)  评论(0)    收藏  举报