Parlez des modes de fusion en CSS

Qu'est-ce que le mélange ?

Selon Wikipédia :

❝

Un mode de fusion (ou mode de fusion) dans l'édition d'images numériques et l'infographie est utilisé pour déterminer comment deux calques interagissent avec Mélange. Dans la plupart des applications, le mode de fusion par défaut masque simplement le calque sous-jacent en le recouvrant du contenu du calque supérieur. En CSS, il existe deux propriétés responsables du mélange.

est utilisé pour mélanger des éléments DOM et

est utilisé pour combiner plusieurs arrière-plans CSS.

mix-blend-mode(Partage de vidéos d'apprentissage : background-blend-modetutoriel vidéo CSS

)

Entrez

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

Exemple de base

Prenons un exemple de base Voyez comment Ça marche. J'ai un cercle au-dessus de mon titre. Ce que je vais faire, c'est mélanger le texte avec les cercles.

「HTML」

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

「CSS」

Ajout de

à l'élément de texte pour le combiner avec Round mélanger.

mix-blend-mode: overlay

Code source du cas : https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

Images avec texteJe pense qu'il s'agit d'un mode de fusion largement utilisé. Le texte est en haut et les images en bas.

Ajout de ce qui suit au titre :

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

Plus que simplement changer le mode de fusion. Par exemple, nous pouvons augmenter la créativité en créant des animations.

Dans cet exemple, je souhaite explorer comment le texte se mélange avec l'arrière-plan des feuilles. Étant donné que l’image contient des points sombres et lumineux, cela peut être très utile pour donner l’impression que le texte bouge sous chaque feuille.

Code source du cas : https://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=0100

Texte avec graphiques SVG

Un effet intéressant est d'avoir un titre sur un fond avec des vecteurs et des formes. Cela devient plus intéressant lorsque les formes sont de couleurs différentes.

Que pouvons-nous faire avec ces formes de blob ? J'ai utilisé le plugin MorphSVG pour changer le chemin de chaque forme de blog. Cela a produit un résultat intéressant.

Code source du cas : https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010

Mélanger des éléments réels

L'effet qui a attiré mon attention est lorsque l'élément a un fond blanc et un premier plan noir en utilisant `mix-blend-mode: screen` .

Cours de loupe

J'ai utilisé un SVG et lui ai appliqué ce qui suit. Remarquez comment les zones noires deviennent transparentes lors de l'utilisation de l'écran.

Code source du cas : https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100

Couverture vidéo

Pour moi, c'est un cas d'utilisation très utile. J'ai souvent besoin d'ajouter une icône de lecture pour indiquer qu'il y a une vidéo dans l'article, je finis donc par utiliser un SVG transparent depuis le centre.

Cela semble correct, mais il présente certaines limites. Et si vous souhaitez ajouter un effet de survol pour remplir le triangle ? Cela n'est pas possible puisque les formes sont soustraites en SVG. Une solution de contournement consiste à placer un cercle derrière le SVG et à le colorer en survol.

Pour moi, cela ne suffit pas. Je veux aussi l'inverse, le triangle doit être blanc et le reste bleu.

Grâce au mode de fusion, je peux obtenir rapidement des effets en contrôlant le SVG intégré au survol.

.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;
}

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

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

事例源码：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 lazy"  src="/static/imghw/default1.png"  data-src="cake.jpg"   data- 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

「浏览器支持」

Adresse originale : https://css-tricks.com/basics-css-blend-modes/

Auteur : Ahmad Shaeed

Adresse de traduction : https:// segmentfault.com/a/1190000038883022

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!