背景色覆盖背景图失效原因：CSS新手的技术疑问

嘿，我来帮你搞清楚这个问题！你最初的写法失效根本不是选择器优先级的锅，而是对CSS background 简写属性的用法理解错啦～

为什么第一种写法没效果？ #

在CSS的background简写语法里，如果你同时写了颜色值（比如rgba(0,0,0,.3)）和图片URL，颜色会被当作图片加载失败时的 fallback 备用色，而不是叠加在图片上的遮罩。也就是说，背景图片会直接覆盖在这个颜色上面，所以你完全看不到半透明的深色效果——毕竟图片在最上层嘛！

另外你最初的URL还犯了一个小错误：'..img/image.jpg' 少了一个斜杠，正确路径应该是'../img/image.jpg'，不过就算路径改对了，依然看不到遮罩效果，核心原因还是颜色被图片盖住了。

为什么linear-gradient的写法生效了？ #

当你用linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5))作为背景的一部分时，这个渐变其实是被当作一张背景图片来处理的。CSS允许在background里叠加多层背景，顺序是先写的在上层，后写的在下层。所以这里半透明的渐变层叠在背景图片上面，就形成了你想要的遮罩效果。

额外的实现方案：用伪元素做遮罩 #

如果你觉得渐变的写法不够直观，还可以用伪元素来实现遮罩，这样结构和样式分离更清晰：

body {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  background: url('../img/image.jpg') no-repeat;
  background-size: cover;
  min-height: 100vh;
  position: relative; /* 给伪元素定位提供参照 */
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0; /* 确保遮罩层在背景图片上方 */
}

/* 给页面内容添加层级，让内容显示在遮罩上方 */
.page-content {
  position: relative;
  z-index: 1;
}

这样的好处是，遮罩层和背景图片完全独立，后续调整遮罩的透明度、颜色甚至添加动画都会更灵活。

内容的提问来源于stack exchange，提问作者Kami