【你不知道的CSS】mix-blend-mode

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

normal：正常
multiply：正片叠底
screen：滤色
overlay：叠加
darken：变暗
lighten：变亮
color-dodge：颜色减淡
color-burn：颜色加深
hard-light：强光
soft-light：柔光
difference：差值
exclusion：排除
hue：色相
saturation：饱和度
color：颜色
luminosity：亮度
initial：初始
inherit：继承
unset：复原

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.mode{position: relative;}.text{position: absolute;top: 20px;left: 20px;bottom: 20px;right: 20px;background: rgb(108, 124, 15);font: bolder 100px 'Alfa Slab One';color: #fff;text-align: center;padding-top: 10px;}
</style>
</head>
<body><div class="mode"><div class="text" :style="{'mix-blend-mode': value}">CSS<br />mix-blend-mode</div><img src="https://www.dengzhanyong.com/PHP/images/1606961604.jpg" /></div>
</body>
</html>

正常情况下是这种效果

现在我们来添加mix-blend-mode属性，并为它赋上不同的值看看效果：

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

这里我就不一一的举例了，这个属性在有些时候可以解决一些棘手的样式问题，近期我对个人网站的样式又进行了一些优化，其中有一个波浪的效果。

其实这个就是一张gif图，它的原图其实是这样的

gif不能像png那样看到后面的内容，此时放到项目中的实际效果就是这样。

很显然这与我们想要的效果相差甚远，利用mix-blend-mode可以很好的解决这个问题。设置属性值为 screen ，就可以把黑色区域后面的内容透视上来。

<img class="wave-wrap" src="https://www.dengzhanyong.com/xiaomanju/sources/wave.gif"/>

.wave-wrap {position absolutebottom 0left 0width 100%height 100pxmix-blend-mode: screen;
}

在实际使用中，你可能不太了解每个属性值的实际效果什么样，这里建议可以每个值都去试一下，总有一个可以达到你想要的效果。

兼容性

欢迎访问我的个人网站（相信你会喜欢上我的风格）：www.dengzhanyong.com

关注我的个人公众号【前端筱园】，不错过我的每一篇推送

【你不知道的CSS】mix-blend-mode相关推荐

html字体怎么是什么属性,你不知道的CSS字体属性
原标题:你不知道的CSS字体属性如果你对于CSS技巧没有深入地了解,这篇文章会让你知道一些控制字体加载的技巧. CSS的字体显示属性在Blink-based浏览器中可以被使用.它使你能够发现浏览器的 ...
你不知道的CSS单位
CSS中大部分属性值都有对应的量词单位,常见的如描述盒模型尺寸的 width, height, margin, padding, border,又比如CSS3中的transform属性的一些值.下面的 ...
html边框塌陷怎么,你不知道的CSS(边框塌陷)？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼在html和CSS的学习中,你可能会做很多精美的网页,但其中一些不常见的问题,或许初次遇到的你会很是棘手,下面就一些例子我做一些简单分析. 图片加上链接后 ...
你不知道的 CSS 文档流技巧，让布局更简单
看文章之前,先来看两个例子.这是我们在项目中最常见的项目布局方式. 案例一:多个容器按照相同间距水平排列. 案例二:常见的菜单导航看到这两个案例时,你可以先短暂的想想平时都是如何实现的,很多同学的答 ...
你不知道的CSS函数，Min、Max、Clamp()函数基础用法
目录 1.Min函数 2.Max函数 3.clamp函数 1.流体尺寸 2.反响应式计算工具参考文档 3.动态分割线 4.兼容性 5.总结 1.Min函数 min() 函数会从表达式的值中选择一个 ...
你不知道的css——4. 基线、中线、x-height、单位ex（含文本与图标对齐技巧）
字母x的下边缘(线)就是CSS中的基线. ascender height: 上行线高度. cap height:大写字母高度. median: 中线. baseline:基线 descender he ...
HTML外边框塌陷什么意思,你不知道的CSS(边框塌陷)？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼在html和CSS的学习中,你可能会做很多精美的网页,但其中一些不常见的问题,或许初次遇到的你会很是棘手,下面就一些例子我做一些简单分析. 图片加上链接后 ...
你不知道的CSS特效
文字两边添加中间线鼠标移除下拉箭头旋转鼠标移入图片放大鼠标移入-进度条扫描二维码页面底部走动的卡通热点新闻持续滚动速度曲线步长旋转木马美的导航搜索小米产品耳机按钮事件进度条炫 ...
你不知道的CSS霓虹灯文字总结
霓虹灯文字可以为任何网站增添美好的未来感.我一直都很喜欢霓虹灯的那种未来感. 在本文中,我们将使用CSS和keyframes实现文本发光效果,以及各种霓虹灯动画的方法. 最终效果: 为文本添加发光效果 ...
【CSS】1447- 2022年你不知道的CSS新特性
本文介绍的内容大多数整理于\@Bramus[1]发表的CSS in 2022[2],有些在其基础上进行了完善,并增加了相应的实践例子.接下来让我们逐个来了解下吧. 容器查询(Container Que ...

【你不知道的CSS】mix-blend-mode

兼容性

欢迎访问我的个人网站（相信你会喜欢上我的风格）：www.dengzhanyong.com

关注我的个人公众号【前端筱园】，不错过我的每一篇推送

【你不知道的CSS】mix-blend-mode相关推荐

最新文章

热门文章