今天向大家推荐一个
CSS3属性：mix-blend-mode，其中mix和blend的中文意译均为混合，那么这个属性的作用直译过来就是混合模式。
文字智能适配背景颜色
- 这个效果就是在黑色背景中显示白色文字，在白色背景中显示黑色文字，而且是自动的：
<style>
.main {
width: 600px;
height: 200px;
background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
position: relative;
margin: 100px auto;
}
.main::before {
content: '白雾茫茫丶';
position: absolute;
font-size: 50px;
width: 100%;
height: 100%;
top: 40%;
left: 20%;
color: #fff;
mix-blend-mode: difference;
animation: move 3s infinite linear alternate;
}
@keyframes move {
0% {
transform: translateX(20%);
}
100% {
transform: translateX(-20%);
}
}
</style>
<div class="main"></div>
我们可以发现，代码非常简单，关键是这个属性：mix-blend-mode: difference
- 这是为什么呢？经过一番资料查阅，设置了这个属性后，它是这样计算的：
黑底白字：
当前颜色： 255 255 255
父元素： 0 0 0
混合后的颜色：255 255 255
白底黑字：
当前颜色： 255 255 255
父元素： 255 255 255
混合后的颜色： 0 0 0 由此可以得出结论：混合后的颜色 = 当前颜色 - 父元素背景色
实现文字镂空效果
代码语言：HTML复制<style>
.parent {
background-image: url("./images/1.jpg");
width: 600px;
height: 400px;
position: relative;
margin: 100px auto;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 900;
font-size: 50px;
color: #000;
background-color: #fff;
mix-blend-mode: screen;
}
</style>
<div class="parent">
<div class="child">白雾茫茫丶</div>
</div>
mix-blend-mode 其他属性
属性值 | 描述 |
|---|---|
normal | 默认值，没有混合效果 |
multiply | 正片叠底 |
screen | 滤色 |
overlay | 叠加 |
darken | 变暗 |
lighten | 变亮 |
color-dodge | 颜色减淡 |
color-burn | 颜色加深 |
hard-light | 强光 |
soft-light | 柔光 |
difference | 差值 |
exclusion | 排除 |
hue | 色相 |
color | 颜色 |
saturation | 饱和度 |
luminosity | 亮度 |
其它属性的效果，有兴趣的伙伴可以研究一下！
