背景 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             
 8             .box1{
 9                 width: 257px;
10                 height:133px;
11                 margin: 0 auto;
12                 background-color: #bfa;
13                 /*
14                 使用background-image来设置背景图片
15                 语法 background-image:url(相对路径)
16                 如果背景图片大于元素，默认会显示图片的左上角
17                 如果背景图片的元素一样大，则会将图片全部显示
18                 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
19                 
20                 可以同时为一个元素指定背景颜色和背景图片
21                 这样背景颜色将会作为背景图片的底色
22                 一般情况下设置完背景图片时都会同时指定一个背景颜色
23                 */
24                background-image: url(捕获1.PNG);
25                /*
26                background-repeat用于设置背景图片的重复方式
27                可选值
28                repeat 默认值，背景图片会双方向重复（平铺）
29                no-repeat 背景图片不会重复，有多大就显示多大
30                repeat-x 背景图片沿水平方向重复
31                repeat-y 背景图片沿垂直方向重复
32                
33                背景元素是默认贴着元素左上角显示
34                通过background-position可以调整背景图片在元素中的位置
35               可选值
36                top right left bottom center中的两个值来指定一个背景图片的位置
37                top left 左上
38                background-position:bottom right 右下
39                background-position:center center 居中
40                如果只给出一个值则第二个值默认是center
41                
42                也可以直接指定两个偏移量
43                第一个是 水平偏移量
44                第二个是 垂直偏移量
45                background-position:100px 100px 向左偏移100px 向下偏移100px
46                水平偏移量 如果指定一个正值，则图片会向右移动指定的像素
47                          如果指定一个负值，则图片向左移动指定的像素
48                垂直偏移量同理
49                */
50               background-repeat: no-repeat;
51             }
52             body{
53                 background-image: url(捕获111.PNG);
54                 background-repeat: no-repeat;
55                 /*
56                 background-attachment用来设置背景图片是否随页面一起波动
57                 可选值
58                 scroll 默认值，背景图片随着窗口波动
59                 fixed 背景图片会固定在某一个位置，不随页面波动
60                 
61                 当背景图片的background-attachment设置为fixed时，
62                 背景图片的定位永远相对于浏览器的窗口
63                 
64                 不随窗口滚动的图片，一般设置给body，而不设置给其他元素
65                 
66                 */
67                background-attachment: fixed;
68             }
69         </style>
70         <!--也可以将.box写在CSS中导入
71         <link rel="stylesheet" type="text/css" href="new_file.css" />
72         -->
73     </head>
74     <body>
75         <div class="box1"></div>
76     </body>
77 </html>

 

posted @ 2019-07-19 20:10  zuiaimiusi  阅读(109)  评论(0)    收藏  举报