CSS のブレンド モードについて話す

#ブレンディングとは何ですか?

Wikipedia によると:

❝

デジタル画像編集およびコンピューター グラフィックスのブレンディング モード (またはブレンディング モード) は、2 つのレイヤーがどのように相互作用するかを決定するために使用されます。相互ブレンド。ほとんどのアプリケーションでは、デフォルトのブレンド モードは、単に最下層を最上位レイヤーのコンテンツで覆うことによって非表示にします。

❞

CSS には、ブレンドを担当する 2 つのプロパティがあります。 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、円とブレンドします。

ケースのソース コード: https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

テキスト付き画像

これは広く使用されているブレンディング モードだと思います。本文が上、写真が下になります。

タイトルに次の内容を追加しました:

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

描画モードを変更するだけではありません。たとえば、アニメーションを作成することで創造性を高めることができます。

この例では、テキストが葉の背景とどのようにブレンドされるかを調べたいと思います。画像には暗い点と明るい点が含まれているため、これはテキストが各葉の下で動いているように見せるのに非常に役立ちます。

#ケースのソースコード: 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 では形状が減算されるため、これは不可能です。回避策の 1 つは、SVG の後ろに円を置き、ホバー時に色を付けることです。

私にとって、それだけでは十分ではありません。逆も必要です。三角形は白、残りは青でなければなりません。

ブレンド モードのおかげで、ホバー時に埋め込み SVG を制御することで、この効果をすばやく実現できます。

rreeee

事例源码：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 中国語 Web サイトの他の関連記事を参照してください。