问题标签 [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 - 在任何非白色背景上将文本颜色更改为白色
当背景颜色为黑色时，将文本颜色更改为白色效果很好mix-blend-mode: difference。将鼠标移到文字上查看效果：
如果背景不是黑色，这可以理解不会导致白色文本：
有什么方法可以使文本在背景与白色不同时立即从黑色变为白色？
html - 混合混合模式背景与不受影响的子内容
我正在尝试使用混合混合模式来创建具有多重效果叠加的背景，该叠加也显示了部分背景。我还需要子内容不受混合模式的影响。像这样：
我尝试将混合模式设置为未设置，我也尝试使用隔离/隔离，但似乎无法使该选项起作用。我不想使用伪元素或将内容放在父元素之外，因为设计师的实际布局有很多内容，我需要它来响应。
到目前为止我已经能够工作： 我可以让背景和覆盖工作，但影响也适用于内容层： https ://codepen.io/orlafitz/pen/JVRQpM
有谁知道是否有可能实现这一目标？
css - 为什么 css mix-blend-mode: color; 覆盖除白色之外的所有颜色，而不是除白色和黑色之外的所有颜色？
我试图弄清楚为什么mix-blend-mode: color;css选择器和值会影响除白色之外的所有颜色，而不是影响除白色和黑色之外的所有颜色。有人可以向我解释为什么会这样吗？
svg - 打印使用混合混合模式乘法的 SVG
我有一个使用混合混合模式的svg：乘法。此 svg 是使用 JS 在浏览器中以编程方式生成的。
我可以在浏览器中下载这个 svg 并想将该 svg 文件发送到打印机（专业印刷公司），但是当他们在 Illustrator 或 Photoshop 等中打开文件时，不会保留乘法效果。
有没有办法在客户端克服这个问题。我想也许 svg 可以展平。这能行吗？
任何帮助将不胜感激。
谢谢，
css - Safari：混合混合模式亮度无法正常工作
我有一张mix-blend-mode在 Firefox 和 chrome 上完美运行的图像，但不适用于 safari。叠加层位于我拥有的 CSS 滑块上，但我发现它transform弄乱了mix-blend-mode属性。如何避免转换干扰 css 样式。
我正在使用Swiper Slider
下面我放置了我的代码以及它的外观。最终结果应如下所示：
css - 使用 CSS 将子元素的背景颜色与父元素的背景图像混合
我想将元素的背景颜色与父元素的背景图像混合。将 css 属性“background-blend-mode”设置为“multiply”时，它仅在颜色和图像设置在同一元素上时才有效。但我想存档在同一背景图像上混合的不同颜色 - 所以我必须将背景图像与儿童的颜色混合。有没有办法到达那里？
css - 混合模式不适用于 elementor wordpress 网站
由于我的网站http://newwebsite.outfit24.com.au（仍在建设中）是基于图像的，我希望标题文本颜色发生变化，以便它从背景中脱颖而出（深色和浅色图像）。我已经使用 Elementor 来批量构建我的网站，并且正在使用“自定义 CSS 和 JS”插件来编写我的 CSS 并更改标题颜色。在 elementor 中，我将 header CSS 类设置为“custom-header”。
我尝试过使用“混合混合模式：差异；” 但是混合混合模式以红色突出显示并且似乎不起作用。这是 mix-blend-mode 不起作用的屏幕截图：https ://ibb.co/MNbf84z
我希望 CSS 能够正常工作，更改标题的颜色，使其在#fff、#000 和网站上的任何图像前面都可见，但由于某种原因，mix-blend-mode 突出显示为红色和不工作。有谁知道为什么会这样？
谢谢你的帮助：）
css - 在css中混合颜色时忽略某些元素
可以不混合绿色和蓝色吗？
我的意思是蓝框应该忽略绿框，只与红框混合颜色
我尝试了混合混合模式，但没有帮助
更新：期望的结果
android - 将 mix-blend-mode 设置为“正常”以外的任何内容都会在 Android 9 上的 Chrome 中隐藏元素
CSS 的 mix-blend-mode 在 Android 9 上似乎失败了：
- 铬合金
- Cordova 中的 Webview（在这种情况下也可能是 Chrome）
它适用于：
- Android 8 上的 Chrome
- Android 9 上的火狐
我最初遇到了 SVG 元素的问题，但我也可以使用一些简单的 div 来重现它。
一个非常简单的代码示例： https ://codepen.io/walmink/pen/YoJRqa
我尝试运行下面的示例并在运行 Android 8（左）的 Nexus 5 上获得预期结果，但在运行 Android 9（右）的 OnePlus 6 手机上失败（见图）。我有其他用户（我的一个使用混合模式的游戏）在运行 Android 9 的 OnePlus 7 和 Google Pixel 3a XL 上报告了同样的问题。
它似乎在我尝试过的任何桌面浏览器上都可以正常工作。在 Safari 上，除非您添加 ，否则它也会与背景混合isolation: isolate，但至少混合仍然会发生。
css - 混合混合模式与 2 个重叠 div 但需要排除文本
我正在弯曲 2 个元素，它们重叠了大约 25%。使用混合混合模式，它可以很好地混合背景，也可以混合文本。
JS 小提琴就在这里：https ://jsfiddle.net/simohell/q9breg60/
我尝试使用 ::before 来应用混合混合模式，但我无法弄清楚。