CSS의 블렌딩 모드에 대해 이야기하기

블렌딩이란?

Wikipedia에 따르면:

❝

디지털 이미지 편집 및 컴퓨터 그래픽의 혼합 모드(또는 혼합 모드)는 두 레이어가 서로 혼합되는 방식을 결정하는 데 사용되며 대부분의 응용 프로그램에서 기본 혼합 모드는 숨기기입니다. 맨 위 레이어의 콘텐츠로 덮어 맨 아래 레이어를 덮습니다.

❞

CSS에는 블렌딩을 담당하는 두 가지 속성이 있습니다. mix-blend-mode는 DOM 요소를 혼합하는 데 사용되며 ground-blend-mode는 여러 CSS 배경을 결합하는 데 사용됩니다. mix-blend-mode用于混合DOM元素，background-blend-mode用于组合多个CSS背景。

（学习视频分享：css视频教程）

进入<span style="font-size: 20px;">mix-Blend-Mode</span>

基础范例

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

「HTML」

<div class="circle"></div>
<p>Blend Me</p>

「CSS」

为文本元素添加了mix-blend-mode: overlay

(학습 영상 공유: css 영상 튜토리얼)

Enter

<strong>mix-Blend-Mode<span style="font-size: 16px;"></span></strong>

기본 예

기본적인 예를 들어 어떻게 작동하는지 살펴보겠습니다. 제목 위에 원이 있습니다. 제가 할 일은 텍스트를 원과 혼합하는 것입니다.

「HTML」

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

「CSS」

텍스트 요소에 mix-blend-mode: overlay를 추가하여 원과 혼합했습니다.

케이스 소스 코드: https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

텍스트가 포함된 사진

이것이 널리 사용되는 블렌딩 모드인 것 같습니다. 글은 상단에, 사진은 하단에 있습니다.

제목에 다음을 추가했습니다:

.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/ef8d675755fde8087d9439b5593e1956?editors=0100

SVG 그래픽이 포함된 텍스트

흥미로운 효과가 있습니다. 는 배경에 제목. 모양이 색깔별로 다양해서 더 재미있네요.

이 얼룩 모양으로 무엇을 할 수 있나요? MorphSVG 플러그인을 사용하여 각 블로그 모양의 경로를 변경했습니다. 이로 인해 흥미로운 결과가 나왔습니다.

케이스 소스 코드: https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010

혼합 실제 요소

눈에 띄는 효과는 요소가 배경이 흰색입니다. 전경이 검은색인 'mix-blend-mode: screen'을 사용하세요.

돋보기 클래스

SVG를 사용하여 다음과 같이 적용했습니다. 화면을 사용할 때 검은색 영역이 어떻게 투명해지는지 확인하세요. 🎜🎜🎜🎜🎜🎜케이스 소스코드: https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100🎜🎜🎜🎜동영상 커버🎜🎜🎜저에게 이 기능은 매우 유용한 기능입니다. 예. 기사에 동영상이 있다는 것을 나타내기 위해 재생 아이콘을 추가해야 하는 경우가 많기 때문에 결국 중앙이 투명한 SVG를 사용하게 되었습니다. 🎜🎜🎜🎜🎜이 말은 맞는 것 같지만 특정 제한 사항이 있습니다. 호버 효과를 추가하여 삼각형을 채우고 싶다면 어떻게 해야 할까요? SVG에서는 모양을 빼기 때문에 불가능합니다. 한 가지 해결 방법은 SVG 뒤에 원을 배치하고 마우스를 올리면 색상을 지정하는 것입니다. 🎜🎜🎜🎜🎜저에게는 그것만으로는 충분하지 않습니다. 또한 그 반대도 하고 싶습니다. 삼각형은 흰색이고 나머지는 파란색이어야 합니다. 🎜🎜블렌드 모드 덕분에 호버에 포함된 SVG를 제어하여 빠르게 효과를 얻을 수 있습니다. 🎜

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

🎜🎜🎜

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

储值卡

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

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

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

同样，通过为每张卡添加多个背景可以更好:

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

从徽标背景中删除白色

我在Photoshop的早期就知道这个技巧。有时，我需要一个品牌的标志，它是很难得到一个透明的PNG版本。使用混合模式，这很容易解决。

我模拟了Facebook和Amazon徽标，并在每个徽标下添加了白色背景。

现在来解决这个问题，添加了以下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」

<div>
  <span>CSS is Awesome</span>
</div>

「css」

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

span {
    mix-blend-mode: difference;
}

如你所见，文本“ CSS很棒”仅在其父代的边界内融合。外面的东西不会混在一起。换句话说，它是孤立的。

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

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

「html」

<div>
  <img class="lazy" data-src="cake.jpg" alt="">
</div>

「css」

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

img {
  mix-blend-mode: difference;
}

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

进入Background-Blend-Mode

它的工作方式类似mix-blend-mode，但具有多个背景图像。每个背景可以有自己的混合模式，举个例子。

在此示例中，将三层混合在一起：基础图像，实心填充(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);
}

通过对元素应用background-blend-mode: color，结果是图像的去饱和版本。

事例源码：https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8

「浏览器支持」

원본 주소: https://css-tricks.com/basics-css-blend-modes/

저자: Ahmad Shaeed

번역된 주소: https://segmentfault.com/a/1190000038883022

더 보기 프로그래밍 관련 지식은 프로그래밍 입문을 방문하세요! !

위 내용은 CSS의 블렌딩 모드에 대해 이야기하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!