如何为img标签实现的JPEG背景图添加半透纯色覆盖层并保留原图属性

现有代码问题排查 #

1. 给div.home-screen设置的背景色被层级更高的子元素<img>完全遮挡，无法显示
2. 直接修改<img>的opacity属性会降低图片本身的透明度，不是「图片上方叠加半透明纯色层」的效果，会导致整体画面通透度异常
3. 关闭状态下仅重置了<img>的样式，没有清除div.home-screen设置的position、background-color属性，会引发布局偏移

修复方案 #

方案1：CSS伪元素实现覆盖层（推荐） #

无需修改原有HTML结构，维护成本更低，可自由加过渡动画

补充CSS规则

div.home-screen {
  height: 100%;
  overflow: hidden;
  position: relative;
}
/* 半透明覆盖层 */
div.home-screen::after {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(211, 211, 211, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
div.home-screen img.background {
  top: -50%;
  margin-left: 0;
  transform: translateX(0);
  width: 100%;
  position: fixed;
  z-index: 0;
}
/* 激活状态类 */
div.home-screen.launchpad-open::after {
  opacity: 1;
}

简化JS逻辑

var isLaunchpadOpen = false;
function openLaunchpad() {
  $("div.home-screen").toggleClass("launchpad-open");
  isLaunchpadOpen = !isLaunchpadOpen;
}

方案2：无CSS修改，直接调整JS逻辑 #

适合不想改动现有CSS的场景，通过内阴影实现覆盖效果

var isLaunchpadOpen = false;
function openLaunchpad() {
  const $homeScreen = $("div.home-screen");
  const $bgImg = $("div.home-screen img.background");
  if (!isLaunchpadOpen) {
    $homeScreen.css({
      "top": 0,
      "position": "fixed"
    });
    // 内阴影覆盖实现半透蒙层，不影响原图本身透明度和比例
    $bgImg.css("box-shadow", "inset 0 0 0 100vw rgba(211, 211, 211, 0.5)");
  } else {
    $homeScreen.css({
      "position": "static",
      "top": "auto"
    });
    $bgImg.css("box-shadow", "none");
  }
  isLaunchpadOpen = !isLaunchpadOpen;
}

两种方案都可以保留原图的原有比例和尺寸，原图在半透层下清晰可见。

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