gpt4 book ai didi

css - 如何让 css 混合模式应用于不同的 "layers"

转载 作者:行者123 更新时间:2023-11-28 08:44:02 25 4
gpt4 key购买 nike

我有一个蓝图,我想将 div 绝对定位在其顶部以突出显示某些房间。

使用 alpha channel (rgba),我仍然可以看到蓝图下方的“墨水”,但根据颜色饱和度,绘图会变得模糊不清。

我知道我可以在包含蓝图的 div 上使用 background-blend-mode: multiply 以获得所需的效果,但它会将它应用于整个图像,因为我必须在同一个 div 上指定颜色和图像。这很难解释但很容易展示,所以我在这里用 paint.net 模拟了它:

enter image description here

同样,我可以使用 background-blend-mode 获得所需的外观,但会将其应用于整个背景图像。我想要 div 中的颜色 multiply 它下面的所有内容。

最佳答案

好吧,我开始写这个问题,发现这是一个浏览器支持问题。我最终找到了 mix-blend-mode,它将混合模式应用于 div/元素“下方”的所有内容,不幸的是,Chrome(截至今天)不支持它。然而,Firefox 确实如此。可以在 chrome 中打开它,转到 chrome://flags/并启用“实验性 Web 平台功能”。

我发现以下链接总体上很有用,我只是没有意识到他们同时谈论背景混合模式和混合混合模式。 http://css-tricks.com/basics-css-blend-modes/

这是它在 firefox 中运行的截图:

enter image description here

关于css - 如何让 css 混合模式应用于不同的 "layers",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27694426/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com