CSS如何在同一元素上同时设置linear-gradient与background-image

安全阿岳

2026-8-27

解决方案

核心原因是CSS支持多背景层配置，linear-gradient本质是浏览器生成的矢量图像，可以和普通位图背景一起写在background-image属性中，用逗号分隔即可实现叠加效果。你之前代码不生效是因为多次书写background缩写属性，后写的规则会直接覆盖前序的背景配置，导致始终只有一个背景层生效。

正确代码示例

如果你需要渐变作为蒙层叠加在背景图上方，直接修改.dvNav样式如下即可：

.dvNav {
  flex-direction: column;
  display: flex;
  padding: 0.5rem 1rem 0 1rem;
  color: var(--white-color);
  height: 100vh;
  /* 多背景层：越靠前的层级越高，会叠在上层 */
  background-image: 
    linear-gradient(
      180deg,
      rgba(28, 3, 25, 1) 0%,
      rgba(35, 1, 26, 1) 35%,
      rgba(52, 1, 34, 1) 100%
    ),
    url(/images/amey.png);
  /* 对应两个背景层的重复规则，顺序和background-image完全对应 */
  background-repeat: no-repeat, no-repeat;
  /* 对应两个背景层的定位 */
  background-position: center, top right;
  /* 兜底纯色，固定在所有背景层最下方 */
  background-color: rgb(28, 3, 25);
}

注意事项

层级顺序规则：background-image中逗号分隔的多个背景，排在前面的层视觉层级更高，会覆盖后面的内容。如果需要图片显示在渐变上方，把url(/images/amey.png)挪到linear-gradient()前面即可。
配套属性规则：除了background-color只能设置1个值（永远在所有层最底部），background-repeat、background-position、background-size都可以按照背景层的顺序，写多个逗号分隔的值分别控制每一层；如果只写1个值，该规则会对所有背景层生效。
尽量不要重复书写background缩写属性设置单一层背景，后写的background会覆盖前面所有的背景相关配置，导致多背景失效。