自古黑白两分明

马黑黑

自古黑白两分明

马黑黑

代码：

1. <style>
   
2.     .txtbox {
   
3.         margin: 20px auto;
   
4.         width: 740px;
   
5.         height: 300px;
   
6.         color: #eee;
   
7.         text-shadow: 1px 1px 2px silver;
   
8.         background: linear-gradient(36deg, #333 50%, #eee 50.5%, #eee 0);
   
9.         border: 1px solid gray;
   
10.         font: bold 4em sans-serif;
    
11.         display: grid;
    
12.         place-items: center;
    
13.     }
    
14.     .txtbox p {
    
15.         mix-blend-mode: difference;
    
16.     }
    
17. </style>
    
18. 
    
19. <div class="txtbox">
    
20.     <p>自古黑白两分明</p>
    
21. </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，结果混合后却是黑白分明

霜染枫丹

马老师晚上好~~

这组代码是可以做一个标题的底图吗？我是看显示的样式我在做PPT标题的时候会用这样的图形联想的。

霜染枫丹

我试试看，若容易可以用在PPT或者视频的标题上，我用类似图形做PPT底图的时候选色是难题，经常重复很多次的填充。若这样改变颜色，就可以先做好在成图，方便很多。

上海朝阳

我是看不懂的，呵呵呵

杨帆

奇妙的效果，奇特的手法，非常迷人

霜染枫丹

这套代码于我而言简直就是神器！太喜欢了！！怎么能想出来这样漂亮的文字混合效果，不可思议！不一定遵守36度的切割，可以变一下，不影响文本的显示。那个混合模式不用堪称奇妙，就是绝对奇妙！什么也不用想，文本文字颜色与背景进行“差异”计算：在深色背景上 → 文字显示为浅色 在浅色背景上 → 文字显示为深色， 在分界线上 → 会产生过渡效果，太好用了！！这个我一定收藏好，可以使用的地方太多了，再也不用在ps上进行切割合成，忙了半天一看还不理想，收获了满满的挫败感。

谢谢马老师！！

                               
登录/注册后可看大图