英文:
How to add an image filter on top of an image?
问题
I'm trying to put a filter on top of my image but I just can't seem to get it right.
这是我正在尝试重新创建的内容:
You can see the red overlay on top of the image but it's also got like a darker tint to it.
您可以看到图像上面的红色叠加层，但它还带有较深的色调。
I tried putting a relative div on top of the image and giving this a red background. After that I gave it an opacity and moved it around to see what looks the best. But it doesn't come anywhere near as you can see in this image.
我尝试在图像上方放置一个相对的 div 并给它一个红色背景。然后我给它设置了不透明度并移动它，以看看哪种效果最好。但正如您在这个图像中看到的，它的效果远不及。
I'm not sure where to look and I'm wondering whether this would even be possible with only html and css?
我不确定应该从哪里着手，我想知道是否仅使用 HTML 和 CSS 就可以实现这个效果？
英文:
I'm trying to put a filter on top of my image but I just can't seem to get it right.
This is what I am trying to recreate:
You can see the red overlay on top of the image but it's also got like a darker tint to it.
I tried putting a relative div on top of the image and giving this a red background. After that I gave it an opacity and moved it around to see what looks the best. But it doesn't come anywhere near as you can see in this image
I'm not sure where to look and I'm wondering whether this would even be possible with only html and css?
答案1
得分: 0
你需要设置两个CSS样式才能获得相同的效果。
第一个是mix-blend-mode: darken;。将这个设置为darken实际上完成了几乎所有的工作。它使它与背景图片和文本混合在一起。但它变得有点太暗，为了增加对比度，使结果更加生动，我添加了filter: contrast(200%);。这两者结合在一起产生了以下效果：
英文:
I've found out to get the same result you need to set two CSS stylings.
First one being mix-blend-mode: darken;. Setting this to darken does actually almost all the work. It causes it to mix with the background images and text. But it becomes a little bit too dark, so to increase the contrast to add some more boom like in the result I want I added filter: contrast(200%);. These two together produces the following
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论