CSSマスク合成の高度なテクニック：単一画像の任意の色変換-CSSチュートリアル-php.cn

CSSマスク合成の高度なテクニック：単一画像の任意の色変換

青灯夜游

リリース： 2022-08-31 20:26:37

転載

2276 人が閲覧しました

この記事では、単一の画像に基づいてあらゆる色変換を実現する、CSS マスク合成に基づいた高度な画像切り取りテクニックを紹介します。

CSSマスク合成の高度なテクニック：単一画像の任意の色変換

##CSS

mask-composite をマスターすると、画像を使用してさまざまな変換を行うことができ、さまざまな色の変換を行うこともできます。 [推奨される学習: css ビデオチュートリアル ]

単一の PNG/SVG からリバースカット画像を取得する

これが起こった結果ですはい、1 つこの日、次のような PNG/SVG 画像を取得しました。

CSSマスク合成の高度なテクニック：単一画像の任意の色変換

この画像に関する限り、それは PNG 画像であり、灰色の部分は透明です。

需要が進むにつれて、ある時点で、上記のグラフィックに基づいた逆中空グラフィックが必要になります:

えっと、白い部分に注意してください。次のように、さまざまな背景色が透けて見えるように、ここは透明にする必要があります:

どうすればよいですか? 一般的に言えば、唯一の方法は UI を見つけて、それから中空の絵を作ります。

もちろん、現在必要なのは PNG/SVG だけであり、CSS を使用して上記の変換を簡単に完了できます。ここでは

mask-composite を使用する必要があります。

マスクコンポジット`とは何ですか?`

それで、

mask-composite とは何ですか? もちろん、この段階では、ブラウザのプレフィックス -webkit-mask-composite を追加する必要があります。。

まず、

mask-composite の使い方を学ぶには、CSS のもう 1 つの非常に重要で便利なプロパティである mask について知る必要があります。

まだ

mask に慣れていない場合は、最初にこの記事を読むことをお勧めします --素晴らしい CSS MASK

画像中にマスクを使用する場合がマスクされてカットされている場合、同時に

mask-composite 属性を適用することもできます。これは非常に興味深い要素です。

-webkit-mask-composite: プロパティは、同じ要素に適用される複数のマスクイメージを相互に合成する方法を指定します。

平たく言えば、その機能は、要素に複数のマスクがある場合、 -webkit-mask-composite を使用してエフェクトを重ね合わせることができるということです。

例:

<div></div>

ログイン後にコピー

.original {
    background: #000;
    mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

ログイン後にコピー

radial-gradient をマスクとして使用して、元の四角形を切り取り、新しいグラフィックを取得します。

方向を変える場合:

<div></div>

ログイン後にコピー

.original {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}

ログイン後にコピー

こんな効果を出したい場合:

どうすればいいですか?

上記の 2 つのマスクの効果を組み合わせてみます:

.mask {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
        radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

ログイン後にコピー

効果は次のとおりです:

これは、これは、2 つのマスクのグラフィックを重ね合わせた結果が上記のグラフィックの効果であるためであり、上記の効果には問題はありません。

必要なのは 2 つのマスクグラフィックスの重なっている部分です。

現時点では、

mask-composite を使用できます。 ：

.mask {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
        radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
    -webkit-mask-composite: source-in;
}

ログイン後にコピー

-webkit-mask-composite:source-in を追加すると、2 つのマスクグラフィックの重なっている部分を取得し、それをマスク全体に適用できます。この重複部分に基づいてマスク:

CodePen デモ -- マスク合成デモ:
https://codepen.io/Chokcoco/ pen/KKQjxMP

-webkit-mask-composite は、次のようなさまざまな関数を実装することもできます。

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/

ログイン後にコピー

看看这张图，就一目了然（图片源自 CSS mask 实现鼠标跟随镂空效果）

使用 `-webkit-mask-composite` 实现图片的扩展

基于上述的知识铺垫，回到我们的主题，在我们有了一张透明图片（PNG/SVG）之后，我们可以轻松的利用 -webkit-mask-composite 得到它的反向镂空图：

.mask {
    background: #000;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: exclude;
}

ログイン後にコピー

不仅如此，我们还可以利用这个技巧，使用图片本身作为 mask 遮罩，配合 -webkit-mask-composite，从而将一张纯色图片，扩展到各类不同颜色，甚至是渐变色！

<div></div>
<div></div>
<div></div>
<div></div>

ログイン後にコピー

.original {
    background: url($img);
    background-size: cover;
}
.mask {
    background: #000;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: exclude;
}
.mask-color {
    background: green;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: source-in;
}
.mask-gradient {
    background: linear-gradient(blue, yellowgreen);
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: source-in;
}

ログイン後にコピー