背景与渐变

约 329 字大约 1 分钟

布欧-Lewyon

2026-05-16

背景属性

.box {
  background-color: #1890ff;
  background-image: url('pattern.png');
  background-repeat: no-repeat;  /* no-repeat / repeat-x / repeat-y */
  background-position: center;   /* 或 50% 50% / left top */
  background-size: cover;        /* cover(覆盖) / contain(包含) / 200px 100px */
  background-attachment: fixed;  /* 固定背景（滚动时不动） */
}

简写

.box {
  background: #1890ff url('bg.png') no-repeat center/cover;
  /* color image repeat position/size */
}

多重背景

.box {
  background:
    url('top.png') no-repeat top center,
    url('bottom.png') no-repeat bottom center,
    linear-gradient(to bottom, #1890ff, #52c41a);
}

线性渐变

.linear {
  /* 方向 颜色 颜色 */
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(45deg, red, blue);
  background: linear-gradient(to bottom, #1890ff 0%, #52c41a 50%, #faad14 100%);
}

径向渐变

.radial {
  /* 形状 大小 at 位置 */
  background: radial-gradient(circle, red, blue);
  background: radial-gradient(ellipse at center, yellow, orange, red);
  background: radial-gradient(circle at 30% 40%, #fff 0%, #1890ff 100%);
}

锥形渐变

.conic {
  background: conic-gradient(red, yellow, green, blue, red);
  /* 色轮效果 */

  /* 饼图 */
  background: conic-gradient(
    #1890ff 0% 25%,
    #52c41a 25% 50%,
    #faad14 50% 75%,
    #ff4d4f 75% 100%
  );
  border-radius: 50%;
}

小结

属性	作用
`background`	简写
`linear-gradient`	线性渐变
`radial-gradient`	径向渐变
`conic-gradient`	锥形渐变
`background-size: cover`	背景覆盖
`background-attachment: fixed`	视差效果

上一节：浮动与多列布局下一节：阴影、圆角与边框