使用:before伪元素为背景图添加黑色透明图层无效求助

问题根源 #

你的代码里有几个关键问题导致伪元素图层没显示：

1. CSS变量未定义：.card:before里用var(--black)覆盖了之前的#19191b，要是--black变量没在全局或父元素里定义，背景色会变成透明，图层自然看不见。
2. 重复属性混乱：重复写了opacity和z-index，虽然最后生效的是后写的属性，但代码冗余容易引发意外问题。
3. 背景图片未适配容器：.card的background只加了no-repeat，没设置background-size，图片可能铺不满容器，容易误以为伪元素没生效。
4. HTML语法错误：普通HTML里应该用class，你写的className是React框架的语法，会导致标题和段落的样式不生效，也会干扰视觉判断。

修正后的代码 #

CSS部分

/* 先定义全局CSS变量，要使用--black必须提前声明 */
:root {
  --black: #19191b;
}

.card {
  padding: 2rem 3rem;
  position: relative;
  overflow: hidden;
  /* 让背景图片居中铺满容器 */
  background: url("assets/images/11.webp") no-repeat center/cover;
  z-index: 1;
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  opacity: 0.8;
  /* 确保伪元素在背景之上、内容之下 */
  z-index: 0;
  border-radius: 8px;
  pointer-events: none;
  /* 兼容旧浏览器的透明度写法可保留，现代浏览器无需 */
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
}

HTML部分

<div class="card customcard1">
   <h3 class="cardTitle">card header</h3>
   <p class="cardPara">card paragraph</p>
   <p class="cardPara">card paragraph</p>
   <p class="cardPara">card paragraph</p>
   <p class="cardPara">card paragraph</p>
   <p class="cardPara">card paragraph</p>
</div>

额外提醒 #

• 伪元素的position: absolute不需要加!important，父元素已经设置position: relative，伪元素会自动相对父元素定位。
• 若无需兼容IE8及更早版本，可以直接删除带前缀的透明度属性，标准opacity足以支持现代浏览器。

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