CSS 마스크 복합 고급 기술: 단일 이미지의 임의 색상 변환

이 기사에서는 단일 이미지를 기반으로 임의의 색상 변환을 수행하는 CSS 마스크 합성을 기반으로 한 고급 이미지 절단 기술을 소개합니다.

CSS mask-composite를 마스터하면 그림을 사용하여 그림에 대한 다양한 변형을 얻을 수 있고 심지어 다양한 색상의 다양한 변형도 얻을 수 있습니다. [추천 학습: css 동영상 튜토리얼]mask-composite ，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。【推荐学习：css视频教程】

通过单张 PNG/SVG 得到它的反向切图

事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：

就这张图片而言，它是一张 PNG 图，灰色部分透明。

随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：

emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：

怎么办呢，通常而言，只能是找 UI 再出一张镂空图。

当然，在今天，只需要一张 PNG/SVG，我们就可以使用 CSS 轻松完成上述的转换。这里我们需要用到 mask-composite。

何为 mask-composite？

那么，何为 mask-composite，当然，现阶段还需要加上浏览器前缀，-webkit-mask-composite。

首先，要学会使用 mask-composite，得先知道 CSS 中另外一个非常重要且有用的属性 -- mask。

如果，你对 mask 还比较陌生，建议你先看看这篇 -- 奇妙的 CSS MASK

在运用 mask 对图片进行遮罩切割处理的同时，我们可以同时再运用到 mask-composite 属性。这个是非常有意思的元素。

-webkit-mask-composite：属性指定了将应用于同一元素的多个蒙版图像相互合成的方式。

通俗点来说，他的作用就是，当一个元素存在多重 mask 时，我们就可以运用 -webkit-mask-composite 进行效果叠加。

举个栗子：

<div></div>

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

我们用一个 radial-gradient 作为 mask，切割原本的矩形，得到一个新的图形。

如果再换一个方向：

<div></div>

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

如果我想得到这样一个效果：

该怎么做呢？

我们尝试合并上述两个 mask 的效果：

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

效果如下：

与我们想象的不太一样，这是因为，两个 mask 的图形叠加，就是上述图形的效果，所以上述效果是没有问题的。

只是，我们想得到的是两个 mask 图形的重叠部分：

这时，我们就可以使用 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 后，我们就可以得到两个 mask 图形的重叠部分，再基于这个重叠部分作用到整个 mask 遮罩：

CodePen Demo -- mask-composite Demo：

https://codepen.io/Chokcoco/pen/KKQjxMP

-webkit-mask-composite

패스 싱글 PNG/SVG에 역방향 컷 이미지가 생겼습니다.

이렇게 된 거죠. 어느 날 다음과 같은 PNG/SVG 이미지가 생겼습니다. 🎜🎜🎜🎜이 이미지는 PNG 이미지이고, 회색 부분이 투명합니다. 🎜🎜수요가 진행됨에 따라 어느 시점에서는 위 그래픽을 기반으로 한 역방향 빈 그래픽이 필요합니다. 🎜🎜🎜🎜emm 여기서 흰색 부분은 투명해야 하며 다른 배경색을 통해 보일 수 있다는 점에 유의하세요. , 다음과 같이 🎜🎜🎜🎜어떻게 해야 하나요? 일반적으로 UI를 찾아서 빈 그림을 만드는 방법밖에 없습니다. 🎜🎜물론 현재는 PNG/SVG만 필요하며 CSS를 사용하면 위의 변환을 쉽게 완료할 수 있습니다. 여기서는 mask-composite를 사용해야 합니다. 🎜

마스크 합성이란 무엇인가요?

🎜그럼 mask-composite란 무엇인가요? 물론 이 단계에서는 브라우저 접두사 -webkit-mask-composite를 추가해야 합니다. 코드>. 🎜🎜우선, <code>mask-composite 사용법을 배우려면 먼저 CSS의 또 다른 매우 중요하고 유용한 속성인 mask를 알아야 합니다. 🎜

아직 마스크에 익숙하지 않다면 이 글을 먼저 읽어보시길 권합니다. -- 멋진 CSS 마스크

🎜마스크를 사용하여 이미지를 마스크하고 자르는 동안 mask-composite 속성도 사용할 수 있습니다. 이것은 매우 흥미로운 요소입니다. 🎜🎜-webkit-mask-composite : 속성은 동일한 요소에 적용된 여러 마스크 이미지가 서로 합성되는 방식을 지정합니다. 🎜🎜일반인의 관점에서 이 기능은 요소에 여러 개의 마스크가 있는 경우 -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; /*只显示不重合的地方*/

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

🎜방사형 그라데이션을 마스크로 사용하여 원래 직사각형을 자르고 새로운 모양을 얻습니다. 🎜🎜🎜🎜방향을 바꾸는 경우: 🎜

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

🎜🎜🎜그런 효과를 얻고 싶다면: 🎜🎜🎜🎜어떻게 해야 할까요? 🎜🎜위 두 마스크의 효과를 병합하려고 합니다: 🎜rrreee🎜효과는 다음과 같습니다: 🎜🎜🎜🎜 상상했던 것과 다릅니다. 두 개의 마스크 그래픽을 중첩한 효과 때문입니다. 위의 그래픽이므로 위의 효과에는 문제가 없습니다. 🎜🎜우리가 원하는 것은 두 개의 마스크 그래픽이 겹치는 부분입니다: 🎜🎜🎜🎜이때 mask-composite를 사용할 수 있습니다: 🎜rrreee🎜 추가됨 - webkit-mask-composite: source-in 이후 두 마스크 그래픽의 겹치는 부분을 가져온 다음 이 겹치는 부분을 기반으로 전체 마스크에 적용할 수 있습니다. 🎜🎜🎜

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

CodePen Demo -- Power of mask-composite：

https://codepen.io/Chokcoco/pen/YzaKLEr

这样，仅仅是利用一张 PNG/SVG 原图，我们就可以得到它的

• 反向镂空图

• 其他纯色图

• 渐变色图

可以有效的节省图片资源，起到一定的优化效果！

在之前，我也写过一种基于白底黑图的任意颜色转换，但是存在非常大的局限性：两行 CSS 代码实现图片任意颜色赋色技术，但是今天这个技巧是纯粹的，对原图没有要求的任意色彩转换！

当然，唯一的缺点，目前会受限于 mask-composite 和 -webkit-mask-composite 的兼容性，而且两者的语法存在一定的差异，实际使用的话需要注意。根据业务场景灵活选择。

（学习视频分享：web前端）

위 내용은 CSS 마스크 복합 고급 기술: 단일 이미지의 임의 색상 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!