css遮罩mask_使用mask-image属性在CSS中遮罩图像

css遮罩mask

We covered the use of the clip-path property for clipping using CSS, so it’s only natural that we now go over masking. Contrary to clipping, where a part of an image or element is either completely invisible or completely visible, with masking we can hide or show parts of an image with different levels of opacity.

我们讨论了使用clip-path属性进行CSS剪切的方法，因此现在自然而然地要遍历遮罩。与剪裁相反，在剪裁中，图像或元素的一部分完全不可见或完全可见，通过遮罩，我们可以隐藏或显示具有不同透明度的图像部分。

Masking in CSS is done using the mask-image property, and an image has to be provided as the mask. Anything that’s 100% black in the image mask with be completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will partially mask the image. Linear and radial gradients in CSS are generated images, so they can be used as the image mask. SVGs that use the mask element can also be used as the image mask. Let’s go over the 3 possibilities for image masks with concrete examples:

CSS中的遮罩是使用mask-image属性完成的，必须提供图像作为遮罩。图像遮罩中100％黑色的任何东西都是完全可见的，100％透明的任何东西都将被完全隐藏，中间的任何东西都将部分遮盖图像。 CSS中的线性和径向渐变是生成的图像，因此可以用作图像蒙版。使用mask元素的SVG也可以用作图像蒙版。让我们通过具体示例介绍一下图像蒙版的3种可能性：

使用渐变遮罩 (Masking Using Gradients)

Let’s first use a simple linear gradient that goes from transparent to black. The first image is our default starting image, and the second image has our linear gradient applied as the mask-image value:

首先让我们使用一个从透明到黑色的简单线性渐变。第一个图像是我们的默认起始图像，第二个图像将我们的线性渐变应用为蒙版图像值：

Here’s the CSS rules used here:

这是这里使用CSS规则：

.mask1 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}

Here are two more examples of interesting effects that can be accomplished with masking using gradients:

这是另外两个有趣的效果示例，可以使用渐变遮罩来实现：

And the CSS rules for these 2 gradient masks:

这两个渐变蒙版CSS规则：

.mask2 {
  -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
  mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
  mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
}

使用图像遮罩 (Masking Using Images)

Here’s we’re using an image that was created using Sketch as our image mask. The first image is the image mask itself, and the second image has that mask applied to it:

这是我们正在使用以Sketch作为我们的图像蒙版创建的图像。第一个图像是图像蒙版本身，第二个图像已应用了该蒙版：

And our CSS looks like this:

我们CSS看起来像这样：

.mask4 {
  -webkit-mask-image: url("/path/to/image-mask.png");
  mask-image: url("/path/to/image-mask.png");
  -webkit-mask-size: 400px 600px;
  mask-size: 400px 600px;
}

We specified a value for mask-size here because our image mask is 800px by 1200px, but here we want everything shrunk by half so that the image can look sharp on retina displays.

我们在这里指定mask-size的值是因为我们的图像蒙版是800px x 1200px ，但是在这里我们希望将所有内容缩小一半，以使图像在视网膜显示器上看起来更清晰。

使用SVG遮罩遮罩 (Masking Using SVG Masks)

Finally, if SVG is your groove, you can define image masks using the SVG mask element.

最后，如果您的凹槽是SVG，则可以使用SVG 遮罩元素定义图像遮罩。

The first example currently only seems to be working in Firefox (you probably won’t see anything in non-supporting browsers). It defines the SVG mask and then we reference the ID of the mask in CSS as usual. The second example seems to have wider support and defines the image as part of the SVG element itself.

当前，第一个示例似乎只能在Firefox中运行( 在不支持的浏览器中您可能看不到任何东西 )。它定义了SVG 掩码，然后像往常一样在CSS中引用了掩码的ID。第二个示例似乎具有更广泛的支持，并将图像定义为SVG元素本身的一部分。

Also note that with SVG masks, the colors to use are white and black instead of transparent and black. The colors also work in reverse and white/partially white is what will be visible.

另请注意，对于SVG蒙版，要使用的颜色是白色和黑色，而不是透明和黑色。颜色也可以反向使用，并且白色/部分白色是可见的。

See the Pen mdPBExv by alligatorio (@alligatorio) on CodePen.

请参阅CodePen上的alligatorio ( @alligatorio )的Pen mdPBExv 。

示例1(三角形) (Example 1 (triangle))

Here’s the SVG markup for the first example:

这是第一个示例的SVG标记：

<svg width="0" height="0" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask">
      <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
    </mask>
  </defs>
</svg>

Then we can apply the mask to our image with mask-image as usual by refecencing the ID of the SVG mask:

然后，通过引用SVG蒙版的ID，可以像往常一样将蒙版应用于具有mask-image的图像：

.mask5 {
  -webkit-mask-image: url(#my-svg-mask);
  mask-image: url(#my-svg-mask);
}

示例2(气泡) (Example 2 (bubbles))

For our second SVG example, everything is contained in the SVG definition, including our main image itself:

对于我们的第二个SVG示例，所有内容都包含在SVG定义中，包括我们的主映像本身：

<svg width="400px" height="600px" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask2">
      <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
    </mask>
  </defs>
  <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/css/masking/masking-example1.jpg" width="400" height="600"></image>
</svg>

翻译自: https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image

css遮罩mask