background

background 是一个简写属性

• background-image
• background-repeat
• background-attachment
• background-position
• background-size
• background-origin
• background-clip
• background-color

注意，因为 background-color 不能设置多组，且前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。

.demo {
  background:
    url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
    url(test2.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
    url(test3.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;
}

background-image

background-image 可以是 图片路径 也可以是 渐变背景。

.box {
  background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url('catfront.png');
}

linear-gradient() 生成的是渐变图像，可与普通图片一样作为 background-image 的一层。

.banner {
  background-image: linear-gradient(90deg, #1677ff, #69b1ff);
}

backdrop-filter

backdrop-filter 对元素背后的可见区域应用图形效果，常用于半透明面板的毛玻璃效果。它不会处理元素自身的内容或背景；通常需要搭配半透明背景色。

.glass-panel {
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(20px);
}

background-attachment

• fixed：背景图像相对于视口（viewport）固定。
• scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
• local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

background-origin

• border-box：从 border 区域（含border）开始显示背景图像。
• padding-box：从 padding 区域（含padding）开始显示背景图像。
• content-box：从 content 区域开始显示背景图像。

background-clip

border-box：从 border 区域（含border）开始向外裁剪背景。 padding-box：从 padding 区域（含padding）开始向外裁剪背景。 content-box：从 content 区域开始向外裁剪背景。 text：文字。

参阅

• MDN background