这个问题很常见——直接给容器加opacity会让所有子元素跟着变透明，用伪元素单独承载背景图确实是完美的解决方案，我来帮你一步步调整代码：

1. 调整Angular模板的HTML结构 #

首先我们需要把动态背景图的URL通过CSS自定义属性传递给SCSS，这样伪元素就能拿到这个动态值：

<div class="picture" [style.--bg-image]="'url(' + category.photo + ')'">
  <div class="seeDetails">
    join group
    <button>see details</button>
  </div>
</div>

这里的--bg-image是自定义CSS变量，用来把Angular组件里的动态图片URL传递给SCSS。

2. 重构SCSS代码 #

核心思路是让伪元素单独作为背景层，容器本身做相对定位，子元素放在伪元素上方，hover时只修改伪元素的透明度：

.picture {
  width: 400px;
  height: 300px;
  position: relative; /* 让伪元素基于该容器定位 */
  overflow: hidden; /* 防止背景图溢出容器 */

  /* 伪元素承载背景图 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--bg-image); /* 引用动态传递的背景图 */
    background-size: cover; /* 保持图片比例覆盖容器 */
    background-position: center; /* 背景图居中显示 */
    opacity: 1;
    transition: opacity 0.3s ease; /* 可选：添加平滑过渡效果 */
    z-index: 0; /* 背景层放在最下方 */
  }

  .seeDetails {
    display: none;
    position: relative; /* 让内容在伪元素上方 */
    z-index: 1; /* 确保内容层级高于背景层 */
    padding: 20px;
    color: #333; /* 根据需求调整文字颜色 */
  }

  &:hover {
    /* 只修改背景图的透明度 */
    &::before {
      opacity: 0.2;
    }

    /* 显示子元素并播放动画 */
    .seeDetails {
      display: block;
      animation-name: fadeIn;
      animation-duration: 0.5s;
    }
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

关键逻辑说明 #

• 伪元素::before完全覆盖容器，专门用来承载背景图，和子元素是独立的层级；
• 子元素.seeDetails通过position: relative和z-index:1确保在背景层上方，不会被背景图遮挡，也不会继承背景层的透明度；
• hover时只修改伪元素的opacity，这样只有背景图变透明，内部的文本和按钮完全不受影响；
• 可选的transition属性让透明度变化更平滑，提升用户体验。

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