问题标签 [mix-blend-mode]

我一直在一个小型网站上工作，就像一个集成练习。但是由于我对CSS没有扩展知识，所以我不知道最终是否可能：

我在网站上有一个表单，文本框被边框包围，我在 Photoshop 中应用了混合模式。很想知道它是否存在于 CSS 中，我很快尝试了一下，但在尝试仅在边框上应用 mix-blend-mode 时卡住了。

有没有办法做到这一点，或者有一个选择器可以让我只到达边界而没有别的？

感谢您的回答！

几周前，我在开发过程中（在 OSX 上）使用（当时）最新版本的 Chrome（可能是 v56 或 v57，但我不确定）、Safari 和 Firefox 制作了一个网页。 http://dirkluetter.de/projecttype/camera

Firefox（v52 和 v53）仍按预期显示页面。

虽然最新的 Chrome 版本 (v58) 不再存在。

我使用了 mix-blend-mode 和 background-blend-mode CSS 属性，它们当时工作得很好——而且在 FF 上仍然有效。现在 Chrome / Safari 似乎忽略了该属性，而 Firefox 仍然按预期显示页面。Webkit 浏览器处理混合混合模式的方式最近发生了变化吗？我找不到有关此更改的任何信息...关于混合混合模式和铬还有其他几个问题，但我检查的问题与我的无关。

我试图让 h1 的字体做出反应，使其字体颜色始终与背景相反。我已经检查了所有内容，但不知道出了什么问题。有什么帮助吗？

h1 显示为黑色。我希望它与背景相反。

我正在相互旋转几个矩形，它们的颜色与使用 css 的混合混合模式交互。

在所有浏览器中都很好，但在 Android 上的 chrome 上，在旋转时会在 svg 的矩形形状周围生成黑色背景。一旦它固定到位，黑色背景就会消失。

笔：https ://codepen.io/sashakevich/pen/YVMmZV

html:

CSS：

js

任何想法如何让它表现？

我想做一个看起来像这个代码输出的东西，但不使用mix-blend-mode: multiplycss 的属性，以获得对一些旧版本的现代浏览器的支持。

CSS 的这个特性支持率还很低，看这个链接caniuse.com[mix-blend-mode]

我正在尝试在可滚动块的底部实现渐变文本淡入淡出效果。此外，这个块后面必须有一个图像，所以简单地在这个块上放置颜色（不透明度）渐变是行不通的，mix-blend-mode必须使用。
该块具有以下结构：

.container包含一些文本。.scroll-tools包含自定义滚动条元素（rail 和 thumb）。这是jsfiddle。

几乎所有东西看起来都应该如此。除了滚动条的轨道是黑色的并且mix-blend-mode: screen被应用到.layer并且滚动条的拇指颜色错误时，它是不可见的。
为了排除滚动条被混合，我尝试申请mix-blend-mode，.scroll-box但由于某种原因这不起作用。

问题1：在我的情况下是否可以在不影响滚动条的情况下达到与文本相同的效果？如何？
问题2：为什么应用于（或）mix-blend-mode时不起作用？.scroll-box.text

我正在寻找一种方法来改变background-color-blend-mode像 Photoshop 这样的不透明度。我的目标是为混合模式的不透明度设置动画以使其消失。有任何想法吗 ？

我想要做的是创建界面，该界面将根据背景颜色改变颜色，以使文本始终可读。到目前为止一切正常。我已经记录了我的浏览器以显示一个工作示例：

根据我的研究，我发现实现这一目标的最佳方法是使用mix-blend-mode: difference;. 唯一的问题是，由于某些未知原因，文本变得粗体。

最初我想提供演示，但mix-blend-mode不在代码片段中工作。我不太确定为什么，我看到其他人在演示中使用它，但对我来说，它以红色突出显示。

无论如何，这是一张图片（来自浏览器的屏幕截图的一部分）：

如您所见，应用mix-blend-mode: difference;文本后明显更厚。也许这没什么大不了的，但是当我将其应用于较小的文本时，它看起来真的很糟糕。

我知道这很愚蠢，但是当我尝试在 Photoshop 中重新创建相同的效果时，一切都很好，这意味着使用difference混合模式反转颜色可以正常工作。

我的问题是：如果铭文变得更厚（？），一个人能否获得相同的结果，或者它可能是这样工作的，我无能为力？

我不想改变字体样式light来强制不同的外观。

编辑：好的，这是一个简单的例子——我不知道为什么，但这次它奏效了。上次mix-blend-mode: difference;在演示中根本不起作用，这就是为什么我用图像来描述我的问题。

反正左右两边的文字是没有 mix-blend-mode: difference;的，能看出区别。奇怪的是，没有的白色版本mix-blend-mode: difference;看起来还不错——我只是通过在黑色背景上添加版本才发现它。

以下是屏幕截图的快速比较，以便仔细查看：

嗯......它看起来像在应用mix-blend-mode: difference;到白色文本之后，它被渲染为黑底白字但在白色背景上，这很奇怪，因为字体保持不变，所以通过反转颜色它应该看起来像正常的黑底白字版本，但它没有。我很困惑。

我想制作一个 div，它的文本会根据它周围的背景颜色改变颜色。div 中的颜色将在 2 种不同颜色之间变化，我希望文本颜色与这些颜色相反。因此，当背景为白色时，文本为黑色，当背景为黑色时，文本为白色。我目前正在使用“混合混合模式”，但在背景颜色更改之前，我无法让初始文本颜色与背景颜色相反。当我说颜色会改变时，这是我的意思的Codepen 。它不会是像这样的加载条类型的变化，但你明白了。这也是我的模型中的图像。它是横向的，因为文本将在页面上横向。

HTML：

CSS：

下面是一个针对指定“背景”元素的 CSS 混合模式示例：

这是一个混合模式不应用于的示例body：

是什么赋予了？计算 CSS 混合模式时是否body不考虑元素？这适用于所有浏览器吗？我是谁，我为什么在这里？body当尝试在with上实现动态（通过滚动）混合时，这是一个问题background-attachment: fixed。

更新：这似乎只适用于 Chrome；Firefox/Safari 的行为符合预期 - Chrome 怎么了？