CSS背景属性

CSS背景属性用来设置HTML元素的背景。以下是常见的CSS背景属性：

1. background-color：设置元素的背景颜色。

   background-color: red;

   背景颜色 支持多种类型
   color_name 规定颜色值为颜色名称的背景颜色（比如 red）。
   hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
   rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
   transparent 默认值。背景颜色为透明。
   inherit 规定应该从父元素继承背景颜色。

2. background-image：设置元素的背景图片。

   background-image: url('http://xxxxxxxxx600x600.jpg');

3. background-repeat：设置背景图片的重复方式，比如no-repeat表示不重复。

   .div1{
     background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;
   }

   repeat 默认。背景图像将在垂直方向和水平方向重复。
   repeat-x 背景图像将在水平方向重复。
   repeat-y 背景图像将在垂直方向重复。
   no-repeat 背景图像将仅显示一次。
   inherit 规定应该从父元素继承 background-repeat 属性的设置。

4. background-position：设置背景图片的位置。

   .div1{
     background-position: 0% 0%;
   }

   图片位置 支持3中类型: 百分比，单位，英文关键字。三种类型能混合着写
   默认值为 0% 0%;
   x 轴上：left   center   right
   y 轴上：top   center   bottom

5. background-size：设置背景图片的大小，比如cover表示自适应尺寸填充。

   .div1{
     background-size: auto auto|100% 100%|contain|cover;
   }

   1. 值
   设置背景图像的高度和宽度。
   第一个值设置宽度，第二个值设置高度。
   如果只设置一个值，则第二个值会被设置为 "auto"。

   2. 百分比
   以父元素的百分比来设置背景图像的宽度和高度。
   第一个值设置宽度，第二个值设置高度。
   如果只设置一个值，则第二个值会被设置为 "auto"。

   3. cover
   把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
   背景图像的某些部分也许无法显示在背景定位区域中。

   4. contain
   把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

6. background-attachment：设置背景图片的滚动方式，比如fixed表示固定在视窗中。

   .div1{
     background-attachment:scroll|fixed|inherit;
   }

   scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
   fixed 当页面的其余部分滚动时，背景图像不会移动。
   inherit 规定应该从父元素继承 background-attachment属性的设置。

7. background-origin：设置背景图片的起始位置，比如padding-box表示从padding区域开始显示。

   div1{
     background-origin: padding-box|border-box|content-box;
   }

   背景的相对定位
   背景图像的 background-attachment属性为 fixed，则该属性没有效果。
   padding-box 背景图像相对于内边距框来定位。
   border-box 背景图像相对于边框盒来定位。
   content-box 背景图像相对于内容框来定位。

8. background-clip：设置背景图片的截取方式，比如border-box表示背景图片不超过边框。

   div1{
     background-clip:padding-box|border-box|content-box;
   }

   规定背景的绘制区域
   border-box 背景被裁剪到边框盒。
   padding-box 背景被裁剪到内边距框。
   content-box 背景被裁剪到内容框。

9. backdrop-filter：为元素添加背景滤镜效果。

   div1{
     backdrop-filter: grayscale(100%);
   }

   backdrop-filter: blur(5px); - 给元素的背景应用高斯模糊效果，模糊半径为5像素。
   backdrop-filter: brightness(150%); - 调整元素的背景亮度为原来的150%。
   backdrop-filter: contrast(200%); - 调整元素的背景对比度为原来的200%。
   backdrop-filter: grayscale(50%); - 将元素的背景转换为灰度并降低亮度级别50%。
   backdrop-filter: invert(100%); - 对元素的背景进行颜色反转。
   backdrop-filter: opacity(70%); - 调整元素的背景不透明度为70%。
   backdrop-filter: sepia(80%); - 将元素的背景转换为深褐色，并添加80%的强度。
   backdrop-filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4)); - 在元素的背景上添加一个类似于阴影的效果

• background的可以简写为 :

.bg{
    background : [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip]
}

除此之外，还有一些其他的CSS背景属性，比如background-blend-mode、background-position-x、background-position-y等。