当前位置：首页 > news >正文

css使用mix-blend-mode的值difference实现内容和父节点反色

news 来源：原创 2025/6/21 18:18:43

1. 使用场景

往往开发过程中，经常遇到产品说你这个背景图和文字颜色太接近了，能不能适配下背景图，让用户能够看清具体内容是啥。

这么说吧，这种需求场景非常合理，因为你做开发就是要给用户一个交代，给他们更好的人机交互是每一个前端的最高追求。

2. css解决方案

废话不多说，直接设置子节点的css样式 mix-blend-mode 的值为 difference 即可。

<div class="parent">
	<div class="child">内容</div>
</div>

.parent{
	background-color: #000；
}
.child{
	color: red;
	mix-blend-mode: difference;
}

无论背景图还是背景色都是生效的。
在这里插入图片描述

3. 不生效原因

要么你看下css样式设置是否正确，要么就是你调试的浏览器不支持。
在这里插入图片描述

4. 具体介绍

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

相关值名称样式。

/* 关键字值 */
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: plus-darker;
mix-blend-mode: plus-lighter;

/* 全局值 */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;