你能在CSS中使用Pin-Light吗

Question

我知道我们可以在CSS中使用混合混合模式，但Photoshop中的Pin-Light混合模式似乎不是web浏览器的选项。有没有办法达到同样的效果？

谢谢。

Answer 1

试试这个，我添加了两个例子，一个有覆盖层，另一个没有覆盖层，让你看看的区别

.container {
position: relative;
width: 100%;
margin-bottom:10px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color:rgba(0, 140, 186,0.3);
}

<div class="container">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg/320px-Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg" alt="Avatar" class="image">
<div class="overlay">

</div>
</div>
<div class="container">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg/320px-Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg" alt="Avatar" class="image">

</div>