css - background

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         /* 凡是背景background，一定要有高度！！！ */
 11         body{
 12             margin: 0;
 13         }
 14 
 15         /* 背景颜色 */
 16         .background-color {
 17             height: 500px;
 18             /*
 19                 rgba: rgba->(0,0,0,.7); a透明度
 20                 hex:#000;
 21                 rgb:(0,0,0);
 22                 name:black
 23             */
 24             background-color: #000;
 25         }
 26 
 27         /* 记得广告常用语隐藏 */
 28         .background-attachment {
 29             background-image: url('./酷狗写真.jpg');
 30             /* 
 31             
 32                 fixed:固定不动
 33                 scroll:随页面滚动(默认)
 34              */
 35             background-attachment: fixed;
 36             height: 1000px;
 37         }
 38 
 39         /* 背景图片 */
 40         .background-image {
 41             background-image: url('./酷狗写真.jpg');
 42             /*
 43                 url(''); || url();
 44                 none:无
 45                 
 46             */
 47             height: 1000px;
 48         }
 49 
 50 
 51         /* 背景是否重复 */
 52         .background-repeat {
 53             /* 
 54                 round:四周拉宽至100%
 55                 space:保持缩放比
 56                 no-repeat:不重复
 57                 inherit:继承父类
 58                 initial:继承父类
 59                 repeat:重复(默认
 60                 repeat-x:重复x轴
 61                 repeat-y:重复y轴
 62              */
 63             height: 1000px;
 64             background-repeat: no-repeat;
 65             background-image: url('./酷狗写真.jpg');
 66         }
 67 
 68         .background-position {
 69             background-repeat: no-repeat;
 70             /*
 71                 background-position:x轴 y轴 (偏移量) ->百分比、其它单位...
 72                 top left
 73                 top center
 74                 top right
 75                 center left
 76                 center center
 77                 center right
 78                 bottom left
 79                 bottom center
 80                 bottom right
 81                 x% y%
 82                 xpos ypos 
 83              */
 84             background-position: 20px 20px;
 85             height: 1000px;
 86             background-image: url('./酷狗写真.jpg');
 87             background-color: #000;
 88         }
 89 
 90 
 91         .background-size {
 92             background-image: url('./酷狗写真.jpg');
 93             background-size: 10% 20%;
 94             /* 
 95                 background-size:x轴 y轴(可数值，可百分比)
 96                 background-size:x轴+y轴
 97                 background-size:cover(铺满背景图)
 98                 background-size:contain(按最佳比例，可能会有空白区域)
 99              */
100             background-size: cover;
101         }
102 
103 
104         .background {
105             /*
106                 background-position:x轴 y轴 (偏移量)
107                 background: url('./酷狗写真.jpg') no-repeat top left fixed; 
108 
109                 规范的写法是(顺序官方也是没有限制的,不用的属性可以不用填写,但官方建议如下->为了效率和统一css写法，我们都应该采用这种方式)：
110                 background-color-> background-image-> background-repeat-> background-attachment-> background-position
111              */
112             height: 2000px;
113             background: url('./酷狗写真.jpg') no-repeat fixed top left ;
114             background-size: cover;
115         }
116     </style>
117 </head>
118 
119 <body>
120     <!-- <div class="background-color"></div> -->
121     <!-- <div class="background-attachment"></div> -->
122     <!-- <div class="background-image"></div> -->
123     <!-- <div class="background-repeat"></div> -->
124     <!-- <div class="background-position"></div> -->
125     <div class="background"></div>
126 </body>
127 
128 </html>