使用CSS多重背景为元素背景图片调暗失败，求解决方案

嘿，我明白你碰到的麻烦了！你当前的写法里，多重背景的堆叠顺序搞反啦——CSS里多重背景是先声明的层在最上方，你把背景图片放在了第一个位置，黑色半透明的rgba层在后面，结果图片直接把遮罩完全盖住，自然看不到暗化效果咯～

下面给你几种可行的解决方案：

方法1：调整多重背景的顺序 #

把半透明黑色层放在前面，背景图片放在后面，这样遮罩就会叠在图片上方：

.c-to-c {
  background: rgba(0, 0, 0, .75), url('https://picsum.photos/535/250') no-repeat;
  background-size: cover;
}

这个方法最简单，适合只需要基础暗化效果的场景。

方法2：用伪元素实现遮罩（更灵活） #

如果之后你需要调整遮罩的样式、动画，或者不想影响背景图片的其他设置，伪元素是更好的选择：

.c-to-c {
  position: relative;
  background: url('https://picsum.photos/535/250') no-repeat;
  background-size: cover;
  /* 确保元素有高度，否则伪元素也不会显示 */
  min-height: 250px;
}

.c-to-c::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .75);
  /* 让遮罩在背景图片上方，但在内容下方 */
  z-index: 0;
}

/* 如果元素内有文字/其他内容，需要给内容加相对定位，避免被遮罩挡住 */
.c-to-c > * {
  position: relative;
  z-index: 1;
}

方法3：使用背景混合模式 #

利用background-blend-mode让图片和深色背景混合，也能实现暗化效果：

.c-to-c {
  background: url('https://picsum.photos/535/250') no-repeat, rgba(0, 0, 0, .75);
  background-size: cover;
  /* multiply模式会让颜色叠加，产生暗化效果 */
  background-blend-mode: multiply;
}

这种方法的优势是可以尝试不同的混合模式（比如darken），得到不同的视觉效果。

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