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>