在 jpeg 上添加半透明的纯色 bg

Question

我有一个<img>标记用作背景图像，但我想要一个半透明的纯色背景颜色，它仍然以相同的比例和大小在背景颜色下显示原始图像。 这是我的一些代码（如果您需要更多信息，请询问。另外，JS 和 CSS 都是内联的，我使用 jQuery 3.6.0）：

<div class="home-screen">
  <img class="background" alt="Background Image" src="./assets/images/Desktop_Pictures/Catalina-min.jpg" />
</div>

div.home-screen {
  height: 100%;
  overflow: hidden;
}

div.home-screen img.background {
  top: -50%;
  margin-left: 0;
  transform: translateX(0);
  width: 100%;
  position: fixed;
}

var isLaunchpadOpen = false;

function openLaunchpad() {
    if (isLaunchpadOpen == false) {
        $("div.home-screen").css("background-color", "rgb(211, 211, 211)").css("background-origin", "content-box").css("top", 0).css("position", "fixed");

        $("div.home-screen img.background").css("background-blend-mode", "multiply").css("filter", "opacity(50%)");

        isLaunchpadOpen = true;
    } else if (isLaunchpadOpen == true) {
        $("div.home-screen img.background").css("background-color", "none").css("filter", "opacity(100%)").css("background-blend-mode", "normal");

        isLaunchpadOpen = false;
    }
}

请注意，这不是所有代码，这只是我认为导致问题的代码

Answer 1

您可以使用 CSS 过滤器属性 opacity

img {
 filter:opacity(50%);
}

在这种情况下，如果您想了解有关 css 过滤器属性的更多信息，我建议您使用 css 过滤器属性，我建议您查看以下示例：

我希望我有所帮助；） css 过滤器属性

Answer 2

1. 适用position: relative; 到图像的包装： .home-screen { psotion: relative; } .home-screen { psotion: relative; }
   
2. 使用::after创建一个跨越整个包装器的伪元素： .home-screen::after { display: block; content: ""; position: absolute; inset: 0; .home-screen::after { display: block; content: ""; position: absolute; inset: 0;
   
3. 通过使用rgba颜色作为值，将半透明背景颜色应用于伪元素。

 .home-screen { position: relative; }.home-screen::after { content: ""; display: block; position: absolute; inset: 0; background-color: rgba(0, 0, 255, 0.5); } /* for styling purpose only */ img { width: 100%; }

 <div class="home-screen"> <img class="background" alt="Background Image" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg" /> </div>