谈谈CSS中的混合模式

我们以一个基本的例子来看一下它是如何工作的。我的标题上方有一个圆圈。我要做的是将文本与圆混合。

「HTML」

Blend Me

「CSS」

为文本元素添加了mix-blend-mode: overlay，从而将其与圆混合。

事例源码：https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

带文字的图片

我认为这是一个广泛使用的混合模式。文字在上面，图片在下面。

在标题中添加了以下内容：

.hero-title {
    color: #000;
    mix-blend-mode: overlay;
}

不仅仅是改变混合模式。例如，我们可以通过创建动画来提高创意。

对我来说，这还不够。我也想反过来，三角形必须是白色的，其余的是蓝色的。

多亏了混合模式，我可以通过在悬停时控制嵌入式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=0100

储值卡

另一种情况是使用裁切图像并将其与其下方的背景融合，结果非常有趣。

img {
    position: absolute;
    right: -15px;
    top: 0;
    width: 110px;
    mix-blend-mode: screen;
}

这个想法是把图片放在右边，左边有标题和描述。

现在来解决这个问题，添加了以下CSS：

img {
    mix-blend-mode: multiply;
    filter: contrast(2);
}

注意，我添加了filter: contrast(2)来增加徽标的对比度。应用混合效果使他们比原来的颜色深一点。

问题已解决！当然，我不建议使用此功能。但是，如果我被迫这么做，我将使用它来节省时间，当原始徽标到达时，我可以替换它并消除混合效果。

事例源码：https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100

Isolation

isolation CSS属性定义该元素是否必须创建一个新的层叠上下文（stacking context）。

该属性的主要作用是当和background-blend-mode属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

「html」

  CSS is Awesome

「css」

div {
  isolation: isolate; /* Creates a new stacking context */
}

span {
    mix-blend-mode: difference;
}

事例源码：https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100

isolation 可以通过使用创建新的堆栈上下文的属性来实现。例如，如果父元素具有opacity 属性，这将影响结果。

「html」

「css」

div {
  opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */
}

img {
  mix-blend-mode: difference;
}

在此示例中，将三层混合在一起：基础图像，实心填充(Solid Fill)和渐变填充(radient Fill.)。

.elem {
    background: linear-gradient(45deg, #000 10%, transparent), 
              linear-gradient(#3754C7, #3754C7), 
              url(nature.jpg);
  background-size: cover;
  background-blend-mode: overlay, color;
}

在CSS中，应该以正确的方式对每个背景进行排序。堆叠顺序从上到下，如上图所示。

事例源码：https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100

着色图像

通过使用径向梯度，有一些有趣的结果比有用。这个想法是添加一个彩色的图像，使它与它混合。

:root {
  --color: #000;
  --size: 250px; /* Gradient Size */
}

.elem-1 {
  background: radial-gradient(circle var(--size) at center, transparent, var(--color)), 
              url(nature.jpg);
}

原文地址：https://css-tricks.com/basics-css-blend-modes/

作者：Ahmad Shaeed

译文地址：https://segmentfault.com/a/1190000038883022

更多编程相关知识，请访问：编程入门！！

以上就是谈谈CSS中的混合模式的详细内容，更多请关注其它相关文章！