自古黑白两分明
<style>.txtbox {
margin: 20px auto;
width: 740px;
height: 300px;
color: #eee;
text-shadow: 1px 1px 2px silver;
background: linear-gradient(36deg, #333 50%, #eee 50.5%, #eee 0);
border: 1px solid gray;
font: bold 4em sans-serif;
display: grid;
place-items: center;
}
.txtbox p {
mix-blend-mode: difference;
}
</style>
<div class="txtbox">
<p>自古黑白两分明</p>
</div> 代码：
<style>
.txtbox {
margin: 20px auto;
width: 740px;
height: 300px;
color: #eee;
text-shadow: 1px 1px 2px silver;
background: linear-gradient(36deg, #333 50%, #eee 50.5%, #eee 0);
border: 1px solid gray;
font: bold 4em sans-serif;
display: grid;
place-items: center;
}
.txtbox p {
mix-blend-mode: difference;
}
</style>
<div class="txtbox">
<p>自古黑白两分明</p>
</div>
实现原理：
div容器元素设置线性背景渐变；子元素 p 设置mix-blend-mode 融合模式。这样，背景和前景就有融合效果，黑背景下的前景保持白色，白色背景下的前景自动变成了黑色。
difference 混合的基本算法是从较亮的颜色中减去较暗的颜色，上述黑白背景配白色前景只能使用这个 mix-blend-mode 属性设置。可以从中得到启发，开发出更为丰富多彩的文本渲染效果。 另外提示一下，一楼示例并没有使用纯黑（#000 或 black）和纯白（#fff 或 white），是接近色，属于灰度颜色。若使用纯黑、白的颜色，对比度更为明显。 还有，选择一楼的文本，得到的渲染效果也是非常迷人 马黑黑 发表于 2025-12-8 18:17
实现原理：
div容器元素设置线性背景渐变；子元素 p 设置mix-blend-mode 融合模式。这样，背景 ...
很奇妙，正在想这是怎么实现的，原来是difference 混合的的奇妙用法呢。 马黑黑 发表于 2025-12-8 18:20
另外提示一下，一楼示例并没有使用纯黑（#000 或 black）和纯白（#fff 或 white），是接近色，属于灰度颜色 ...
现在的对比度已经很明显了呢。 其实挺奇妙的，那个color: #eee;，背景background: linear-gradient(36deg, #333 50%, #eee 50.5%, #eee 0);里也有 #eee，结果混合后却是黑白分明{:4_199:} 马老师晚上好~~
这组代码是可以做一个标题的底图吗？我是看显示的样式我在做PPT标题的时候会用这样的图形联想的。{:4_190:}
我试试看，若容易可以用在PPT或者视频的标题上，我用类似图形做PPT底图的时候选色是难题，经常重复很多次的填充。若这样改变颜色，就可以先做好在成图，方便很多。{:4_204:}{:4_190:}
我是看不懂的，呵呵呵 奇妙的效果，奇特的手法，非常迷人{:4_191:} 这套代码于我而言简直就是神器！太喜欢了！！怎么能想出来这样漂亮的文字混合效果，不可思议！不一定遵守36度的切割，可以变一下，不影响文本的显示。那个混合模式不用堪称奇妙，就是绝对奇妙！什么也不用想，文本文字颜色与背景进行“差异”计算：在深色背景上 → 文字显示为浅色 在浅色背景上 → 文字显示为深色， 在分界线上 → 会产生过渡效果，太好用了！！这个我一定收藏好，可以使用的地方太多了，再也不用在ps上进行切割合成，忙了半天一看还不理想，收获了满满的挫败感。
谢谢马老师！！
https://cccimg.com/view.php/c5fc41f6f9a44821fb7913e140f12581.gif
霜染枫丹 发表于 2025-12-8 22:27
这套代码于我而言简直就是神器！太喜欢了！！怎么能想出来这样漂亮的文字混合效果，不可思议！不一定遵守36 ...
如果使用非灰、白色系，融合模式还有很多选择，十多种之多，可以参阅我过去的一个演示（虽然它不是针对文本）：
背景混合模式 background-blend-mode 演示
上海朝阳 发表于 2025-12-8 20:13
我是看不懂的，呵呵呵
左瞧瞧，右看看，然后说，啊，美，秒懂{:4_189:} 杨帆 发表于 2025-12-8 21:09
奇妙的效果，奇特的手法，非常迷人
感谢支持 霜染枫丹 发表于 2025-12-8 20:12
我试试看，若容易可以用在PPT或者视频的标题上，我用类似图形做PPT底图的时候选色是难题，经常重复很多次的 ...
是很方便的 红影 发表于 2025-12-8 19:42
很奇妙，正在想这是怎么实现的，原来是difference 混合的的奇妙用法呢。
对。过去做的基本是图形与图形之间的融合，其实背景和前景一样可以融合的 红影 发表于 2025-12-8 19:43
现在的对比度已经很明显了呢。
纯白与纯黑对比度更强 红影 发表于 2025-12-8 19:53
其实挺奇妙的，那个color: #eee;，背景background: linear-gradient(36deg, #333 50%, #eee 50.5%, #eee 0) ...
这就是融合（混合）的原理了