背景增强

1. 多背景

.element {
  background:
    url('overlay.png') no-repeat center,
    linear-gradient(to right, #667eea, #764ba2);
}

第一个声明在最上层，最后一个在最底层。

2. background-size

background-size: cover; /* 等比缩放覆盖容器 */
background-size: contain; /* 等比缩放完整显示 */
background-size: 100px 200px;
background-size: 50% 100%;

3. background-clip

background-clip: border-box; /* 默认 */
background-clip: padding-box;
background-clip: content-box;
background-clip: text; /* 仅文字区域 */

渐变文字效果：

.gradient-text {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

4. background-origin

background-origin: padding-box; /* 默认 */
background-origin: border-box;
background-origin: content-box;

origin 是背景图片定位的起始点，clip 是背景绘制的裁剪区域。

5. background-attachment

background-attachment: scroll; /* 默认，随页面滚动 */
background-attachment: fixed; /* 固定不动 */
background-attachment: local; /* 随元素内容滚动 */