DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
mix-blend-mode
属性定义元素内容如何与其背景混合。 例如,<h1>
的文本可以以有趣的方式与后面的背景混合。
.blend {
mix-blend-mode: exclusion;
}
在上面的示例中,内容已通过 mix-blend-mode
修改,因此文本的颜色被排除在背景之外。 这只是此属性的众多值之一。
Chrome 58+ 中存在一个问题,即 mix-blend-mode
不会在设置为透明 的元素上呈现。 该问题已在 Chrome 中标记为 问题 711955,截至撰写本文时已分配。 同时,一个简单的解决方法是为 body 元素分配白色(或实际上任何)背景颜色。
值
initial
: 属性的默认设置,不设置混合模式。inherit
: 元素将从其父元素继承混合模式。unset
: 从元素中删除当前混合模式。<blend-mode>
: 这是下面混合模式之一的属性normal
: 此属性不应用任何混合。multiply
: 元素与背景相乘并替换背景颜色。 结果颜色始终与背景颜色一样深。screen
: 将背景与内容相乘,然后对结果进行取反。 这将导致比background-color
更亮的内容。- overlay: 根据背景颜色将内容相乘或进行屏幕混合。 这是硬光混合模式的逆运算。
- darken: 如果内容更暗,背景将被内容替换,否则保持不变。
lighten
: 如果内容更亮,背景将被内容替换。color-dodge
: 此属性会使背景颜色变亮以反映内容的颜色。color-burn
: 此属性会使背景颜色变暗以反映内容的自然颜色。hard-light
: 根据内容的颜色,此属性会对其进行屏幕混合或相乘。soft-light
: 根据内容的颜色,此属性会使其变暗或变亮。difference
: 此属性将两个颜色中较暗的颜色从较亮的颜色中减去。exclusion
: 与difference
类似,但对比度更低。hue
: 创建一个颜色,该颜色的色相与内容的色相相结合,饱和度和亮度与背景的饱和度和亮度相结合。saturation
: 创建一个颜色,该颜色的饱和度与内容的饱和度相结合,色相和亮度与背景的色相和亮度相结合。color
: 创建一个颜色,该颜色的色相和饱和度与内容的色相和饱和度相结合,亮度与背景的亮度相结合。luminosity
: 创建一个颜色,该颜色的亮度与内容的亮度相结合,色相和饱和度与背景的色相和饱和度相结合。 这是color
属性的逆运算。
值得注意的是,设置除 normal
以外的混合模式将生成一个新的堆叠上下文,然后必须将其与包含该元素的堆叠上下文混合。
下面演示了这些值的效果
相关属性
更多信息
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
41 | 32 | 否 | 79 | TP |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 18.0 |
所以我想这是不可能的,就像继承的不透明度一样,但有人找到了将混合模式应用于容器,然后不将其效果应用于其子元素的方法吗? (例如,将 div 的彩色背景混合以将底部的内容乘以,同时保持 div 内的文本不透明)。 我一直在使用 mix-blend-mode: unset; 用于子元素,但还没有成功。
我认为没有办法选择性地混合 div 的子元素,但这很新,而且还没有足够的研究所,所以我认为值得一试。 谢谢!
啊,我确实研究了一下演示,但无法弄清楚如何阻止子元素继承父元素的样式。 遗憾的是,目前可用的文档非常缺乏。
谢谢,Robin! 如果我发现任何信息,我会发布的。
新的“隔离”属性并不能完全解决您的问题,但它可能有助于解决一些混合模式问题。 说实话,我还没有找到它的实际用途,但我自己的实验到目前为止非常轻量级。
我只是想分享一下,看看其他人是否能解决这个问题。 我完全同意,我们需要一种方法将子节点与容器分离,然后再将混合应用于这些容器。
我也遇到了同样的问题,找不到解决方法...
Mix-Background-Mode: ;
应该可以解决你的问题:D 这里你可以看到它的实际效果
Mozilla 开发者网络
CSS 技巧
看看 Ableton 网站上这种非常优雅的 mix-blend-mode 的使用:https://loop.ableton.com/register/
看起来很不错,但在 Firefox 中会导致大量滚动卡顿。 性能大幅下降。 仅仅是文本,感觉已经坏了。
是的,似乎支持还不太稳定。
昨天我需要混合模式,但不需要将其应用于我的容器的子元素...
它只是一个标题,所以我创建了一个带混合模式的图层,以及另一个绝对定位的图层,其内容与我的相对定位图层中的内容位置相同。
当然,这不是最干净的解决方案,但目前它可以解决问题。
注意,使用 mix-blend-mode 可能会破坏你的 CSS 过渡,例如平滑的不透明度,因为如果任何子元素具有 mix-blend-mode 样式,则不透明度不会在 GPU 上平滑地动画(至少在今天的 Chrome 中是如此,对于“差异”混合模式)。
嗨,Thomas,你找到解决这个问题的方法了吗?
今天看来仍然是如此。 谢谢你的评论。
我为我的艺术家朋友制作了这个... 我觉得很酷。
http://mattsusko.com
Safari 是否已更新为支持色相、饱和度、颜色和亮度值?
看来还没有:https://caniuse.cn/#search=mix-blend-mode
谢谢。 底部的那个小动画很有帮助。 很棒的小示例,可以很好地说明了这一点。
我找到了一个方法。 因此,为了将混合模式(不是背景混合模式)应用于元素,你需要将该元素设置为 FONT-ICON——因为字体对混合模式(而不是背景混合模式)是开放的。
我们的设计师有一个设计,要求在我们的图像上叠加彩色叠加层。 但图像需要是 IMG,而不是背景图像。
所以我所做的就是将设计师设计出的形状(这是一个倾斜的方块)在 Illustrator 中重新创建为 SVG。 然后将其编译为 Font-Icon,然后将其应用于 :before 属性。
你可以在此处查看示例——> http://www.perficient.com/services,检查红色角。
根据定位需求,如何为你的背景创建单独的 div(在容器内)并为其提供你的 mix-blend-mode 属性/效果,然后像往常一样继续使用你的容器元素? 示例:https://codepen.io/Merlin007/pen/wJqEaZ
第一个示例在 Chrome v58 之后不再有效。 为了使其再次有效,你需要在图像后面添加一个白色背景,因此最合适的位置在这里
我尝试在这里实现它——bfmos.ru
它在 WordPress 上,Enfold。
我尝试更改的内容——是一个小条
最上面有一个电话号码
我使用的代码示例是
#top .av_header_transparency #header_meta {
background: rgba(255,255,255,1);
mix-blend-mode: difference;
}
主要问题是——为什么 mix-blend-mode
在某些元素上有效,而在其他元素上无效?
我认为 cssTricks 应该发布一篇这样的文章!
(或者我想我将在下一分钟谷歌搜索同样的内容)
请帮忙,我勾选了“给我发送电子邮件以通知我”。
嘿,Andrey! 我在页面上找不到任何这些选择器——也许可以在开发工具中截取一下元素的屏幕截图?
实际上这些都是标准的。 我没有检查,但它们一定是,因为我一直通过“检查元素”应用 CSS,所以它肯定有效。
我失望地发现图像根本没有与页面背景混合。因此,如果您的 BODY 标签上有红色背景,并且页面中的照片具有 mix-blend-mode,则照片不会与背景混合。您需要在图像周围放置一个红色的包装 DIV 才能看到混合效果:https://codepen.io/MSCAU/pen/ywarGV
与这篇文章相反,mix-blend-mode 在 MS Edge (版本 44.18362,Win 10) 中不起作用。我刚测试了一下。Caniuse.com 也将其列为不支持。
您好!这篇文章中的浏览器支持数据实际上是直接从 caniuse 获取的:https://caniuse.cn/#feat=css-mixblendmode
您看到的结果可能是更新的结果,这是caniuse 和 MDN 最近合作的结果:https://caniuse.cn/#feat=mdn-css_properties_mix-blend-mode
很高兴知道拉取的数据不是最新的 - 谢谢!
我一直在研究语义 HTML,希望能为标签设置背景。但是,它不起作用,所以我必须在图片标签周围添加一个容器 div。
那些也是语义 HTML 的元素,情况如何?
我已经尝试过很多次。我无法让 mix-blend-mode 工作。你能帮我一下吗?
https://codepen.io/Girardini/full/WNpGWYN
它与网格布局有关。
如果您更改为块,并使文本重叠,它就可以工作。
就像这样 https://codepen.io/qqqqqqq/pen/wvqZzvm