CSS中的混合模式，制作高级特效的必备技巧

BlendMe

CSS将mix-blend-mode:overlay添加到文本元素，从而将其与圆混合。示例源代码：https://codepen.io/shadeed/pe...Imagewithtext我认为这是一种广泛使用的混合模式。上面是文字，下面是图片。将以下内容添加到标题中：.hero-title{color:#000;混合混合模式：叠加；}不仅仅是改变混合模式。例如，我们可以通过创建动画来增强创造力。在此示例中，我想探索文本如何与树叶背景融合。由于图像包含暗点和亮点，这对于使文本看起来在每片叶子下移动非常有用。示例源代码：https://codepen.io/shadeed/pe...带有SVG图形的文本一个有趣的效果是在带有矢量和形状的背景上有一个标题。当形状有不同的颜色时，它会变得更加有趣。我们可以用这些斑点形状做什么？我使用MorphSVG插件来更改每个博客形状的路径。这有一个有趣的结果。示例源代码：https://codepen.io/shadeed/pe...吸引我眼球的混合真实元素的效果是当元素具有白色背景和黑色前景时使用mix-blend-mode:screen。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。对于放大镜类，我使用了SVG并对其应用了以下内容。注意在使用屏幕时黑色区域是如何变得透明的。示例源代码：https://codepen.io/shadeed/pe...视频封面对我来说是一个非常有用的用例。我经常需要添加一个播放图标来指示文章中有视频，所以我最终使用了一个从中心透明的SVG。这听起来很正确，但它有局限性。如果要添加悬停效果来填充三角形怎么办？由于SVG中形状的减法，这是不可能的。一种解决方法是在SVG后面放置一个圆圈并在悬停时为其着色。对我来说，这还不够。我也想反过来，三角形必须是白色的，其余的是蓝色的。多亏了混合模式，我可以通过在悬停时控制嵌入的SVG来快速实现这种效果。.article__play{混合混合模式：屏幕；}.article:hover.article__play{mix-blend-mode:normal;}.article:hover.article__play{.play__base{fill:#005FFF;}.play__icon{填充：#fff；}}示例源码：https://codepen.io/shadeed/pe...储值卡另一种情况是使用裁剪后的图像，并将其与下面的背景混合，结果非常有趣。img{位置：绝对；右：-15px；顶部：0；宽度：110px；mix-blend-mode:screen;}这个想法是把图片放在右边，把标题和描述放在左边。同样的，可以给每张卡片加多个背景会更好：示例??源码：https://codepen.io/shadeed/pe...大家都说简历没项目可写，于是找了一个项目送给大家，还附赠【搭建教程】。从徽标背景中删除白色我从早期的Photoshop就知道这个技巧。有时，我需要一个品牌标志，但很难获得透明的PNG版本。使用混合模式，这很容易解决。我模拟了Facebook和亚马逊的标志，并在每个标志下添加了白色背景。现在为了解决这个问题，我添加了以下CSS：img{mix-blend-mode:multiply;filter:contrast(2);}注意，我添加了filter:contrast(2)来增加徽标的对比度。应用混合效果，使它们比原来的颜色暗一点。问题解决了！当然，我不推荐使用这个功能。但是，如果迫不得已，我会使用它来节省时间，当原始徽标到达时，我可以替换它并删除混合效果。示例源代码：https://codepen.io/shadeed/pe...isolationCSS属性定义元素是否必须创建新的堆叠上下文。该属性的主要作用是与background-blend-mode属性一起使用时，可以只混合指定元素栈的背景：它允许一组元素与其背后的背景隔离，并且仅混合了这组元素的背景。htmlcssdiv{isolation:isolate;/*创建一个新的堆叠上下文*/}span{mix-blend-mode:difference;}如你所见，文本“CSSisawesome”仅在其父级的范围内混合。外面的东西不会混在一起。换句话说，它是孤立的。示例源代码：https://codepen.io/shadeed/pe...隔离可以通过使用创建新堆栈上下文的属性来实现。例如，如果父元素具有不透明度属性，这将影响结果。htmlcssdiv{不透明度：0.99；/*创建一个新的堆叠上下文，这会导致一个孤立的组*/}img{mix-blend-mode:difference;}示例源代码：https://codepen.io/shadeed/pe...进入Background-Blend-模式类似于mix-blend-mode但具有多个背景图像。例如，每个背景都可以有自己的混合模式。在这个例子中，三个图层被混合在一起：基础图像、纯色填充（SolidFill）和渐变填充（radientFill.）。.elem{背景：线性渐变（45deg，#00010%，透明），线性渐变（#3754C7，#3754C7），url（nature.jpg）；背景尺寸：封面；background-blend-mode:overlay,color;}在CSS中，每个背景都应该以正确的方式排序。堆叠顺序是从上到下，如上图所示。示例源代码：https://codepen.io/shadeed/pe...使用径向渐变对图像进行着色，得到一些有趣的结果而不是有用的。这个想法是添加一个彩色图像，以便它与之融合。：根{--颜色：#000；--尺寸：250px；/*渐变大小*/}.elem-1{background:radial-gradient(circlevar(--size)atcenter,transparent,var(--color)),url(nature.jpg);}通过应用背景-混合模式：元素的颜色，结果是图像的去饱和版本。示例源代码：https://codepen.io/shadeed/pe...浏览器支持文本：https://css-tricks.com/basics...代码部署后可能存在的错误无法实时获知。为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具，Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。