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

BlendMe

"CSS"将mix-blend-mode:overlay添加到文本元素，从而将其与圆混合。示例源代码：https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=01002。带文字的图像我认为这是一种广泛使用的混合模式。上面是文字，下面是图片。在标题中添加以下内容：.hero-title{color:#000;mix-blend-mode:overlay;}不仅仅是改变混合模式。例如，我们可以通过创建动画来增强创造力。在此示例中，我想探索文本如何与树叶背景融合。由于图像包含暗点和亮点，这对于使文本看起来在每片叶子下移动非常有用。示例源代码：https://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=01003。带有SVG图形的文本一个有趣的效果是在带有矢量和形状的背景上有一个标题。当形状有不同的颜色时，它会变得更加有趣。我们可以用这些斑点形状做什么？我使用MorphSVG插件来更改每个博客形状的路径。这有一个有趣的结果。示例源代码：https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=00104。当元素具有白色背景和黑色前景时，使用`mix-blend-mode:screen``混合真实元素的效果引起了我的注意。5.放大镜类我使用了SVG并对其应用了以下内容。注意在使用屏幕时黑色区域是如何变得透明的。示例源代码：https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=01006。视频封面对我来说，这是一个非常有用的用例。我经常需要添加一个播放图标来指示文章中有视频，所以我最终使用了一个从中心透明的SVG。这听起来很正确，但它有局限性。如果要添加悬停效果来填充三角形怎么办？由于在SVG中减去了形状，因此这是不可能的。一种解决方法是在SVG后面放置一个圆圈并在悬停时为其着色。对我来说，这还不够。我也想反过来，三角形必须是白色的，其余的是蓝色的。多亏了混合模式，我可以通过在悬停时控制嵌入的SVG来快速实现这种效果。.article__play{mix-blend-mode:screen;}.article:hover.article__play{mix-blend-mode:normal;}.article:hover.article__play{.play__base{fill:#005FFF;}.play__icon{fill:#fff;}}示例源代码：https://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=01007。储值卡另一种场景是使用裁剪后的图像并将其与下面的背景混合，结果非常有趣。img{position:absolute;right:-15px;top:0;width:110px;mix-blend-mode:screen;}这个想法是将图像放在右边，标题和描述放在左边。此外，为每张卡片添加多个背景可能会更好：示例??源代码：https://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=10008。从徽标背景中删除白色我在PhotoshopSkill的早期就知道这一点。有时，我需要一个品牌标志，但很难获得透明的PNG版本。使用混合模式，这很容易解决。我模拟了Facebook和亚马逊的标志，并在每个标志下添加了白色背景。5a1d791c39202c95ec5.jpg"target="_blank">5a1d791c39202c95ec5.jpg"width="auto"border="0"height="auto"alt=""title="">现在要解决这个问题，添加以下CSS：img{mix-blend-mode:multiply;filter:contrast(2);}注意，我添加了filter:contrast(2)来增加徽标的对比度。应用混合效果，使它们比原来的颜色暗一点。问题解决了！当然，我不推荐使用这个功能。但是，如果迫不得已，我会使用它来节省时间，当原始徽标到达时，我可以替换它并删除混合效果。示例源代码：https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=01009。IsolationisolationCSS属性定义元素是否必须创建新的堆叠上下文。该属性的主要作用是与background-blend-mode属性一起使用时，可以只混合指定元素栈的背景：它允许一组元素与其背后的背景隔离，并且仅混合了这组元素的背景。"html""css"div{isolation:isolate;/*Createsanewstackingcontext*/}span{mix-blend-mode:difference;}如您所见，文本“CSSisawesome”仅在其父项的范围内混合。外面的东西不会混在一起。换句话说，它是孤立的。示例源代码：https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100可以通过使用创建新堆栈上下文的属性来实现隔离。例如，如果父元素具有不透明度属性，这将影响结果。「html」「css」div{opacity:0.99;/*创建newstackingcontext,whichresulttoanisolatedgroup*/}img{mix-blend-mode:difference;}示例源代码：https://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=01002.进入Background-Blend-Mode它的工作方式类似于mix-blend-mode，但有多个背景图像。例如，每个背景都可以有自己的混合模式。在这个例子中，三个图层被混合在一起：基础图像、纯色填充（SolidFill）和渐变填充（radientFill.）。.elem{background:linear-gradient(45deg,#00010%,transparent),linear-gradient(#3754C7,#3754C7),url(nature.jpg);background-size:cover;background-blend-mode:overlay,color;}在CSS中，每个背景都应该以正确的方式排序。堆叠顺序是从上到下，如上图所示。示例源代码：https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=11001。使用径向渐变对图像进行着色有一些有趣的结果而不是有用的。这个想法是添加一个彩色图像，以便它与之融合。:root{--color:#000;--size:250px;/*GradientSize*/}.elem-1{background:radial-gradient(circlevar(--size)atcenter,transparent,var(--color)),url(nature.jpg);}通过对元素应用background-blend-mode:color，结果是图像的去饱和版本。示例源代码：https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f82。“浏览器支持”