css--背景background

background属性

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>背景</title>
 9 
10     <style type="text/css">
11         div{
12             width:320px;
13             height:160px;
14             margin-bottom:50px;
15             border:1px solid black;
16             font-size:30px;
17             color:red;
18             background-color:gold;
19         }
20 
21         .box1{
22             background-image:url(../images/bg.jpg);  /*设置背景图片地址*/
23             /* background-repeat:repeat; 默认重复平铺*/
24             /* background-repeat:no-repeat;  不重复平铺*/
25             /* background-repeat:repeat-x;  横向重复平铺*/
26             /* background-repeat:repeat-y;  纵向重复平铺*/
27 
28         }
29 
30         .box3{
31             background-image:url(../images/bg.jpg);
32             background-repeat:no-repeat;
33             background-position:left center;  /*设置背景图片的位置*/
34         }
35 
36         .box4{
37             width:100px;
38             height:100px;
39             background-image:url(../images/resume.jpg);
40             background-repeat:no-repeat;
41             background-position:-30px -35px; /*设置背景图片的位置*/
42         }
43 
44         /* .box5{
45             height:1000px;
46             width:2000px;
47             background-image:url(../images/resume.jpg);
48             background-position:-30px -35px;
49             background-attachment:fixed;  设置背景图片是固定的 ,不随着页面滚动条滚动
50         }
51         */
52 
53         .box6{
54             background:url(../images/bg.jpg) no-repeat -30px -35px gold;   /*用background属性将所有的设置项放在一起*/
55         }
56     </style>
57 </head>
58 <body>
59 
60 <div class="box1">背景图片</div>
61 <div class="box2"><img src="../images/bg.jpg" alt="背景图">背景图片</div>
62 <div class="box3"></div>
63 <div class="box4"></div>
64 <!--<div class="box5">关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景</div>-->
65 <div class="box6"></div>
66 </body>
67 </html>

 

posted on 2019-11-07 23:55  cherry_ning  阅读(155)  评论(0)    收藏  举报

导航