问题标签 [mix-blend-mode]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 如何修复 Safari mix-blend-mode: color-dodge bug？
我想实现一些位于图像顶部的文本并mix-blend-mode: color-dodge用于使文本看起来更好。
这是示例： https ://codepen.io/pizza0502/pen/KepWGM
它在 Chrome 和 Firefox 中完美运行，但在 Safari 中，不在图像顶部的文本会变成白色......对此有什么解决方案吗？
css - CSS：混合混合模式使转换不再起作用（Chrome，Firefox）
似乎mix-blend-mode: multiply使任何transform不再起作用。这发生在 Chrome 和 Firefox 中，而在 Safari 上它可以工作。（全部更新到最新版本）
在这个小提琴中你可以看到行为：小提琴 （对不起，如果有点乱，我不是开发人员）
第一个图像没有multiply类，而第二个图像有它。
我已经找到了一些关于此的讨论，但没有一个能够解决这个问题。
谢谢！
css - 混合混合模式：差异不适用于固定元素和背景图像
我正在尝试实现两个重叠元素，它们之间具有混合效果，如下图所示，但是该mix-blend-mode属性似乎不起作用，我不知道为什么。
这是我拥有的 HTML 结构：
这是我正在使用的 CSS：
这就是我想要实现的目标
这就是我通过上面的代码得到的：
你可以在这里看到真实的现场场景：http: //bloomint.montenegrostudio.com/work
css - 为什么 CSS 混合模式会被 jquery 插件 fullPage.js 覆盖？
在 fullPage 的默认容器section和slide中使用 CSS 混合模式时“停用” 。
创建者 Alvaro Trigo 指示我使用选项css3: false来解决问题，但它仅适用于部分而不适用于幻灯片，此外，它使页面滚动动画非常不稳定。
他还告诉我，这不是一个整页问题，而是一个 CSS 问题。
这是说明该问题的代码笔：
https://codepen.io/zerino/pen/MXRvbb
这是fullPage的问题论坛中的主题：
css - 从背景混合模式中排除某些部分
我尝试在我的项目中通过代码实现类似于 Photoshop 乘法的效果。同时，我尝试排除子 div 中的一些元素会受到它的影响（如文本层） - 我撞到了墙上。已经尝试添加其他 div 设置不同的 z-index 或使用绝对位置。
在这里您可以找到带有问题示例的笔：
HTML
CSS
摘要： “child div”的子元素受乘法影响。有没有办法防止这种情况？
截图：
css - SVG 中的反色应该只考虑它本身还是其他元素？
我在不同的浏览器中得到不同的结果
Firefox 呈现白色，Chrome 呈现暗线。哪个是对的？
html - 仅将混合模式应用于投影
是否可以仅将元素的阴影与其重叠的元素的颜色混合？
例如：我有一个元素与另一个元素重叠。顶部的元素有一个浅灰色的阴影。下面的元素是黑色的。我不希望将任何混合应用于任何一个元素本身，但希望重叠元素的阴影与下面元素的颜色混合，从而在阴影落在重叠元素上的地方创建更深的灰色。
如果我想将效果应用于包括阴影在内的整个元素，那么可以使用 mix-blend-mode: multiply 来实现。我实际上只想在阴影上使用混合混合模式 - 可以这样做吗？
svg - 防止带有 alpha 通道的重叠图形相互着色？
考虑一个带有两个部分重叠的圆圈的 SVG，两者都带有fill="currentColor". 我不控制当前颜色的值，它可以通过我无法控制的代码设置为任何值。
我希望整个图形具有相同的纯色。如果图像碰巧有例如color: red. 但是，当当前颜色具有 Alpha 通道时，圆圈重叠的部分会变暗。
我想避免这种情况。基本上，我想让第一个图像看起来像这个例子中的第二个：
这是否可以实现，也许使用混合模式？
html - 为什么我不能在混合混合模式后应用 css 过滤器？
我有一些 html 文本，并想应用一些 css 对文本的像素执行以下操作：
- 使用下面的像素应用差异混合模式。
- 应用灰度滤镜。
- 应用具有非常高设置的对比度过滤器。
这将允许将 UI 文本元素定位在图像上，同时仍然具有相当的可读性。
我做了不同的尝试，但仍然没有成功。这是我尝试将文本包装在容器中的一个。混合模式应用于实际的文本元素，而过滤器应用于包装器：
但是，如果您运行它，您会发现它不起作用。在这种情况下，混合模式似乎被忽略了。
When I tried to put the filter and blend mode css both on the h1 element, the filters where both applied before the blend mode, which lead to a different effect that I am trying to achieve.
For clarity, here is a photoshop version of the effect I am trying to achieve:
