如何为激活状态的图片添加白色叠加层（Overlay）

我需要给处于激活状态的图片添加白色叠加层，参考指定设计图的效果，但尝试了多种方法都没达到预期：

• 使用filter: opacity(0.3)或opacity: 0.2：图片看起来像禁用状态，而非激活状态
• 用::after伪类添加背景：同样呈现出禁用的灰暗外观
• 尝试inset box-shadow方案：也没能实现设计中的激活效果

解决方案 #

核心思路：通过父容器的伪元素添加白色半透明叠加层，同时配合橙色边框明确激活状态，避免直接修改图片透明度导致的灰暗感。

调整后的HTML结构 #

<div class="light-box">
  <div id="lboverlay"></div>
  <div id="lbpopup">
    <div class="lbcontrols">
      <img id="lbclose" src="./images/icon-close.svg" alt="close icon" />
    </div>
    <div class="lbcontent">
      <img src="./images/image-product-1.jpg" alt="product1 light-box image" />
      <div class="cart-thumbnail-box">
        <!-- 给每个缩略图包裹父容器，用于添加伪元素叠加层 -->
        <div class="cart-thumbnail-wrapper cart-thumbnail-active">
          <img class="cart-thumbnail" src="./images/image-product-1-thumbnail.jpg" alt="product-1-image" />
        </div>
        <div class="cart-thumbnail-wrapper">
          <img class="cart-thumbnail" src="./images/image-product-2-thumbnail.jpg" alt="product-2-image" />
        </div>
        <div class="cart-thumbnail-wrapper">
          <img class="cart-thumbnail" src="./images/image-product-3-thumbnail.jpg" alt="product-3-image" />
        </div>
        <div class="cart-thumbnail-wrapper">
          <img class="cart-thumbnail" src="./images/image-product-4-thumbnail.jpg" alt="product-4-image" />
        </div>
      </div>
    </div>
  </div>
</div>

对应的CSS代码 #

/* 定义橙色变量，保持样式统一 */
$Orange: hsl(26, 100%, 55%);

.lbcontent {
  width: 80%;
  border-radius: 8px;
  border: 2px solid $Orange;
  background: #fff;
}

.cart-thumbnail-box {
  display: flex;
  width: 22%;
  margin: 3rem 4rem 0;
  gap: 22%;
}

/* 缩略图父容器：负责边框和叠加层 */
.cart-thumbnail-wrapper {
  position: relative;
  border-radius: 0.8rem;
  overflow: hidden;
  cursor: pointer;
  /* 默认边框透明，激活时显示橙色 */
  border: 2px solid transparent;
}

/* 激活状态样式 */
.cart-thumbnail-wrapper.cart-thumbnail-active {
  border-color: $Orange;
}

/* 白色叠加层伪元素 */
.cart-thumbnail-wrapper.cart-thumbnail-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* 调整透明度控制白色层深浅 */
  pointer-events: none; /* 不干扰图片的交互 */
}

.cart-thumbnail {
  width: 100%;
  display: block;
  border-radius: 0.8rem;
}

方案优势 #

1. 父容器伪元素添加的白色叠加层，不会修改图片本身透明度，避免了灰暗的禁用感
2. 橙色边框明确标识激活状态，和白色叠加层配合，既符合设计效果，又能清晰区分状态
3. pointer-events: none确保叠加层不会阻挡图片的点击交互

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