- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
mix-blend-mode
——塞万提斯 分享一个好玩的css属性： mix-blend-mode，MDN 该属性可以将元素和后面的背景进行混合 什么叫混合呢？ 例如我看到的一个网站： 红框框出来的部分，是鼠标移动上去的一个效果 这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理 后来发现并不是，是用的这个css mix-blend-mode
38620编辑于 2022-11-22 - 来自专栏前端开发
mix-blend-mode 利用混合模式让文字智能适配背景颜色
今天向大家推荐一个 CSS3 属性：mix-blend-mode，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合模式。 50px; width: 100%; height: 100%; top: 40%; left: 20%; color: #fff; mix-blend-mode transform: translateX(-20%); } } </style>
我们可以发现，代码非常简单，关键是这个属性：mix-blend-mode -50%); font-weight: 900; font-size: 50px; color: #000; background-color: #fff; mix-blend-mode : screen; } </style>mix-blend-mode 其他属性白雾茫茫丶45210编辑于 2025-08-08 - 来自专栏柠檬先生
mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离
~47 chrome 45~51 Safari 7~9.1 支持的值很多： mix-blend-mode:normal; //正常 mix-blend-mode :multiply; //正片叠加 mix-blend-mode:screen; //滤色 mix-blend-mode:overlay; //叠加 mix-blend-mode :darken; //变暗 mix-blend-mode:lighten; //变亮 mix-blend-mode:color-dodge; //颜色减淡 mix-blend-mode mix-blend-mode:difference; //差值 mix-blend-mode:exclusion; //排除 mix-blend-mode:hue; // 色相 mix-blend-mode:color; //颜色 mix-blend-mode:luminosity; //亮度 mix-blend-mode
1.4K60发布于 2018-01-19 - 来自专栏Coco的专栏
谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode
看看可取的值有哪些： { mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode 变暗 mix-blend-mode: lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode / 柔光 mix-blend-mode: difference; // 差值 mix-blend-mode: exclusion; // 排除 mix-blend-mode 颜色 mix-blend-mode: luminosity; // 亮度 mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode 实例 眼见为实，要会使用 mix-blend-mode ，关键还是要迈出使用这一步。
1.2K81发布于 2018-05-28 - 来自专栏终身学习者
CSS中的混合模式，制作高级特效的必备技巧 进入mix-Blend-Mode
mix-blend-mode用于混合DOM元素，background-blend-mode用于组合多个CSS背景。 进入mix-Blend-Mode 基础范例 ? 在标题中添加了以下内容： .hero-title { color: #000; mix-blend-mode: overlay; } 不仅仅是改变混合模式。 吸引我眼球的效果是当元素有白色背景和黑色前景使用mix-blend-mode: screen。 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 .article__play { mix-blend-mode: screen; } .article:hover .article__play { mix-blend-mode: 进入Background-Blend-Mode 它的工作方式类似mix-blend-mode，但具有多个背景图像。 每个背景可以有自己的混合模式，举个例子。 ?
5.2K40发布于 2020-05-26 - 来自专栏西城知道
【转】动效案例：纯手工写一个滚动视差效果
mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen ; // 滤色 mix-blend-mode: overlay; // 叠加 mix-blend-mode: darken; // 变暗 mix-blend-mode : lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; / / 颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode:
1.8K11发布于 2020-05-21 - 来自专栏Coco的专栏
不可思议的混合模式 background-blend-mode
本文接前文：不可思议的混合模式 mix-blend-mode 。 由于 mix-blend-mode 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 mix-blend-mode 简介 关于 mix-blend-mode 最基本的用法和描述，可以简单看看上篇文章 不可思议的混合模式 mix-blend-mode。 background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。 这里我们使用 mix-blend-mode 也能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下： ?
1.2K50发布于 2018-06-21 - 来自专栏前端达人
动效案例：纯手工写一个滚动视差效果
mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen ; // 滤色 mix-blend-mode: overlay; // 叠加 mix-blend-mode: darken; // 变暗 mix-blend-mode : lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; / / 颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode:
1.8K20发布于 2020-04-08 - 来自专栏Coco的专栏
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
mix-blend-mode：我们通常称之为混合模式，利用混合模式将多个图层混合可以得到一个新的效果，mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 添加了 mix-blend-mode 的 3D 模式下，开启 Layer borders 效果： ? 可以看到，在 mix-blend-mode 的 3D 模式下，确实在整个球形元素之外，又多了一层蓝色 tile。 那么如果是因为 mix-blend-mode 多生成了一个独立渲染平面导致的 3D 失效，那么是否有其他元素也会导致同样的结果呢？ 带着疑惑，去掉了 mix-blend-mode，我又给设置了 3d 的元素添加了一个滤镜： { - mix-blend-mode: lighten; + filter: blur(1px);
1.3K10发布于 2019-02-21 - 给两张同样的图片，叠加上 青色#0ff 和 红色#f00，并且错开一定的距离，两张图都要加上 background-blend-mode: lighten，其中一张再加上 mix-blend-mode 400px; height: 400px; background: url($img), #f00; background-blend-mode: lighten; mix-blend-mode 尝试一下： 通过混合模式 mix-blend-mode: multiply，巧妙的消除了大部分非人物的背景，再通过 filter: contrast(3) 加深这个效果，彻底去掉动图背景，融入了我们的地球背景中 我们借助 Demo 1 的例子继续，就是如下这个效果： 在这个例子的基础上，我们直接加上 filter: grayscale(1) invert(1) 和 mix-blend-mode: hard-light 我们来调试一些，你就能更好的 Get 到其中的奥妙： 这里，核心发挥作用的还是 filter: grayscale(1) invert(1)，而 mix-blend-mode: hard-light来自专栏Coco的专栏
开局一张图，构建神奇的 CSS 效果
="mix">
78030编辑于 2022-12-20
不可思议的混合模式 background-blend-mode
本文接前文：不可思议的混合模式 mix-blend-mode 。 由于 mix-blend-mode 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 mix-blend-mode 简介 关于 mix-blend-mode 最基本的用法和描述，可以简单看看上篇文章 不可思议的混合模式 mix-blend-mode。 background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。 这里我们使用 mix-blend-mode 也能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下： ?
轻松使用纯css3打造有点意思的故障艺术(附React加强组件版)
具体的属性值介绍如下: mix-blend-mode: normal;(正常) mix-blend-mode: multiply(正片叠底) mix-blend-mode: screen;(滤色) mix-blend-mode : overlay;(叠加) mix-blend-mode: darken; (变暗) mix-blend-mode: lighten; (变亮) mix-blend-mode: color-dodge ; (颜色减淡) mix-blend-mode: color-burn; (颜色加深) mix-blend-mode: hard-light; (强光) mix-blend-mode: soft-light ;(柔光) mix-blend-mode: difference; (差值) mix-blend-mode: exclusion; (排除) mix-blend-mode: hue;(色相) mix-blend-mode : saturation; (饱和度) mix-blend-mode: color; (颜色) mix-blend-mode: luminosity; (亮度) mix-blend-mode: initial
CSS奇思妙想 -- 使用 background 创造各种美妙的背景
使用 mix-blend-mode mix-blend-mode ，混合模式。最常见于 photoshop 中，是 PS 中十分强大的功能之一。 ，先简单体会一下 mix-blend-mode 的作用。 CodePen Demo - Repeating-linear-gradient background & mix-blend-mode 尝试不同的 mix-blend-mode 那为什么上面使用的是 mix-blend-mode: multiply 呢？ 这个是非常有意思的元素，非常类似于 mix-blend-mode / background-blend-mode。
使用 backdrop-filter 实现滤镜遮罩
利用混合模式，让文字智能适配背景颜色 这里，backdrop-filter 的替代方案是使用 mix-blend-mode。 我们来看看效果： 经过实测： { mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 } 上述 3 个混合模式，叠加黑色背景，都是可以实现内容的置灰的。 : hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式 有个小技巧，在 CSS 的世界中，但凡和颜色打交道的事情，你都应该想起 filter、backdrop-filter 和 mix-blend-mode。
神奇的 CSS，让文字智能适配背景颜色
看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色。 混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式 一共有下图所示的一些混合模式： 其中，本文的主角是 mix-blend-mode: difference，意为差值模式。 div { // 不确定的背景色 } p { color: #fff; mix-blend-mode: difference; } 无论背景色是什么颜色，设置了 mix-blend-mode : difference 的
元素都可以正常展示出文本： CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色 mix-blend-mode
动效案例：纯手工写一个滚动视差效果
mix-blend-mode: normal; // 正常 mix-blend-mode: multiply; // 正片叠底 mix-blend-mode: screen ; // 滤色 mix-blend-mode: overlay; // 叠加 mix-blend-mode: darken; // 变暗 mix-blend-mode : lighten; // 变亮 mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; / / 颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light; // 柔光 mix-blend-mode 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode:
CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
本文将介绍一个小技巧，通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。 起因 一日，一群友私聊问我。 在 CSS 中，其他能对颜色进行处理的，一是滤镜 filter，另外一个就是混合模式 mix-blend-mode，在这里，脑袋里快速闪过各个滤镜，应该都不行。但是混合模式，倒是能够尝试一下。 在 CSS 中也有混合模式（mix-blend-mode、background-blend-mode），混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一，目前在 CSS 中得到了非常好的支持 Wow，当给两个波浪圆形加上 mix-blend-mode: lighten 时，成功的在白底上过滤掉了蓝色，只在黑色字体上能够看到蓝色波浪的效果。 当然，另外一个混合模式 mix-blend-mode: screen 也能达到类似的效果： 至此，通过混合模式，我们巧妙的实现了这样一个文字镂空的波浪效果。
CSS 3.0中的混合模式的妙用
z-index: 1000; background: #fff; color: #000; mix-blend-mode .wrapper:before { content: " "; padding: 2em 3.5em; mix-blend-mode } .two .wrapper:before { background: #faaa54; mix-blend-mode } .three .wrapper:before { background: #6c320a; mix-blend-mode
除了 filter 还有什么置灰网站的方式？
| 妙用混合模式实现文字镂空波浪效果[7] 利用混合模式，让文字智能适配背景颜色[8] 这里，backdrop-filter 的替代方案是使用 mix-blend-mode。 我们来看看效果： 经过实测： { mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; // 饱和度 mix-blend-mode: color; // 颜色 } 上述 3 个混合模式，叠加黑色背景，都是可以实现内容的置灰的。 : hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式 有个小技巧，在 CSS 的世界中，但凡和颜色打交道的事情，你都应该想起 filter、backdrop-filter 和 mix-blend-mode。
CSS 实现“故障”特效
而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 mix-blend-mode 非常好实现，而单个 J 形示意图如下： ? 关键点 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果 利用 mix-blend-mode: lighten 混合模式实现两个 J 形结构重叠部分为白色 所以整个效果只需要两个标签 这里我们会运用到 background-blend-mode 和 mix-blend-mode 。 假设，我们有这样一张图： ? 还有一些其他的配色及混合模式的搭配，如 黄 + 粉红 + 蓝配合 mix-blend-mode: multiply。 如果想使用于生产环境，需要考虑 mix-blend-mode 和 clip-path 的兼容性问题。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号