前端：background 设置 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #background_set{
 8             background-color: grey;
 9             width: 800px;
10             height: 900px;
11             background-image: url(../picture/3.png);  /* 默认是平铺*/;
12             /*background-repeat:no-repeat;*/
13             /*no-repeat 不重复  repeat-x x轴重复，repeat-y  y轴重复 */
14             /*background-size: 100% 100%;/*背景图片大小设置*/
15             /*background-position: center center;*/
16             /* 值分别为x轴和y轴的数值，可以是像素也可以x轴：left、right、cener；y轴:top、center、bottom
17                默认值：center（值填写一个一直）。
18             */
19          background-repeat: repeat-x;
20          background-position:center 0px;
21          /*他会把中间的图片放在x轴的中间，这个比较有用做背景色 数值可以设置正负*/
22          background-attachment: fixed;
23          /*背景图片，位置设置，固定还是随着滚轮滑动*/
24         }
25     </style>
26 </head>
27 <body>
28     <div id="background_set"></div>
29 </body>
30 </html>

以上我们做的设置是单一样式设置，这些都是背景色的设置，我们可以用复合样式来进行对背景色的设置。

复合样式，即用background来设置这些属性：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .background_set{
 8             width: 800px;
 9             height: 1500px;
10             background: grey url(../picture/1.jpg) no-repeat 0 center fixed;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="background_set">
16         111111111111<br/>
17         111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>
18         111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>
19         111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>
20         111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>111111111111<br/>
21     </div>
22 </body>
23 </html>

 

其中，对于属性background-attachment 属性的解释：如下

 

posted @ 2018-07-04 15:08  evil_liu  阅读(1012)  评论(0)  编辑  收藏  举报