CSS: mask is analysed

preface

To continue with the last article, strike while the iron is hot, this article to talk about CSS mask related properties, CSS mask related properties before their own use is not much, but after the actual use, really strong and easy to use, prepared this article, summary to share with you, words do not say, into the body

Mask related attributes

The CSS mask attribute is similar to the backgroud attribute. It is a short form of multiple attributes. See:

• mask-image
• mask-mode
• mask-repeat
• mask-position
• mask-clip
• mask-origin
• mask-size
• mask-composite

Let’s take a look at what each attribute does

mask-image

Mask-image attribute refers to the mask layer image applied to the element. Mask-image attribute is very powerful and supports many functions. Although some functions are not supported by all browsers, it does not affect its powerful function, which can be seen as the main force of mask. Let’s take a look at some examples of what mask-image supports. Here are all the original images:

url()

The URL function is the most basic function supported by mask-image. You can use an image as a mask through url(), for example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.wrap {
  display: inline-block;
  line-height: 1;
}
.lake {
  width: 300px;
  mask-image: url('.. /img/circle.png');
  -webkit-mask-image: url('.. /img/circle.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

The above example uses a circle as a mask:

<img class="lake" src=".. /img/lake.jpg">
<svg>
  <defs>
    <mask id="mask">
        <path fill="white" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z">
        </path>
    </mask>
  </defs>
</svg>
Copy the code

.lake {
  width: 300px;
  mask: url(#mask);
  mask-image: url(#mask);
  -webkit-mask-image: url(#mask);
}
Copy the code

The final effect is shown below:

<svg width="0" height="0">
  <defs>
      <mask id="mask">
        <path fill="white" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z">
        </path>
      </mask>
  </defs>
</svg>
<svg width="300" height="200">
  <image class="lake" xlink:href=".. /img/lake.jpg"></image>
</svg>
Copy the code

.lake {
  width: 300px;
  mask: url(#mask);
  mask-image: url(#mask);
  -webkit-mask-image: url(#mask);
}
Copy the code

The only difference from the previous example is that the image is inlined in an SVG tag instead of a single image tag so that it can be displayed on both Chrome and Firefox.

Another reason why this works in Chrome is mask: URL (#mask), which is actually what works in Chrome

image()

The image function supports two parameters, the first url() image link and the second color, for example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.wrap {
  display: inline-block;
  line-height: 1;
}
.lake {
  width: 300px;
  mask-image: image(url('.. /img/circle.png'), skyblue);
  -webkit-mask-image: image(url('.. /img/circle.png'), skyblue);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

Unfortunately, the above example is not supported on Chrome or Firefox, so you can’t see the specific mask effect

image-set

The image-set function supports two parameters. The first parameter is the link of the URL () mask, and the second parameter is the pixel density of the device. Different masks can be set according to different screen densities, for example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.lake {
  width: 300px;
  mask-image: image-set(url(.. /img/circle.png)1x, url(.. /img/circle.png)2x);
  -webkit-mask-image: -webkit-image-set(url(.. /img/circle.png)1x, url(.. /img/heart1.png)2x);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

element()

The Element function allows a DOM node to be used as a mask, taking the ID of the DOM node as an example:

<div class="wrap">
  <img id="mask" src=".. /img/circle.png">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.lake {
  width: 300px;
  mask-image: element(#mask);
  mask-image: -moz-element(#mask);
  -webkit-mask-image: element(#mask);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
#mask {
  width: 0;
  height: 0;
}
Copy the code

cross-fade()

The cross-fade function is used to blend two image masks under a certain opacity, for example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.lake {
  width: 300px;
  mask-image: cross-fade(url(.. /img/circle.png),url('.. /img/favor_fill.svg'), 90%);
  -webkit-mask-image: -webkit-cross-fade(url(.. /img/circle.png),url('.. /img/favor_fill.svg'), 90%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

gradient

Gradient should be familiar to everyone, and can be taken as linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), If you are not familiar with the syntax of gradients, you can go to MDN to see how they are used. Here is an example of the effects of gradients as masks:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.lake {
  width: 300px;
  mask-image: repeating-radial-gradient(#000, #000 5px, transparent 5px, transparent 10px);
  -webkit-mask-image: repeating-radial-gradient(#000, #000 5px, transparent 5px, transparent 10px);
}
Copy the code

mask-mode

The mask-mode attribute has three values:

• Match-source: mask-mode Default value. When the value of mask-image is an SVG resource, the mask-mode value is luminance, and the rest values are alpha
• Alpha: Transparency-based mask
• Luminance: Luminance-based mask

What are the effects? Here’s an example:

<div class="wrap">
  <img class="lake" src=".. /img/lake.jpg">
</div>
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  mask-mode: luminance;
  -webkit-mask-mode: luminance;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  mask-mode: luminance;
  -webkit-mask-mode: luminance;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
Copy the code

mask-repeat

Mask-repeat defines whether and how the mask is repeated, and the values are as follows:

• Repeat: Default, the mask is drawn repeatedly over the image area
• Space: The mask is tiled as much as possible, and there is space between masks. The mask picture will not be cropped
• Round: The mask will compress or stretch to fill the entire image
• No-repeat: Masks do not repeat

Here’s a concrete example:

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
}
Copy the code

mask-position

Define the location of the mask image, value: top | | bottom left | right | center | percentage, for example:

.lake {
  width: 400px;
  mask-image: url('.. /img/circle.png');
  -webkit-mask-image: url('.. /img/circle.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: top center;
  -webkit-mask-position: top center;
}
Copy the code

mask-clip

Mask-clip defines the image area to be used by mask-image. Mask-image is only drawn in the specified area. The value can be: The content – box | padding – box | border – box | margin – box | the fill – box | stroke – box | view – box | no – clip, looks a lot of value, but actually has the effect of a few, Let’s look at the effect of each value:

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
}
Copy the code

Original picture, without mask-clip

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-clip: content-box;
  -webkit-mask-clip: content-box;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-clip: padding-box;
  -webkit-mask-clip: padding-box;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png');
  -webkit-mask-image: url('.. /img/star1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-clip: border-box;
  -webkit-mask-clip: border-box;
}
Copy the code

mask-origin

Mask-origin specifies the initial position of the mask-image image to be drawn. The value can be: The content – box | padding – box | border – box | margin – box | the fill – box | stroke – box | view – box, then look at each value of specific effects:

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-origin: content-box;
  -webkit-mask-origin: content-box;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-origin: padding-box;
  -webkit-mask-origin: padding-box;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  margin: 20px;
  padding: 15px;
  border: 10px solid # 000; 
  mask-origin: border-box;
  -webkit-mask-origin: border-box;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
Copy the code

mask-size

Mask-size Specifies the size of the mask-image mask. Contain | cover | length | percentage with length or percentage with need not explain, the length and the percentage is often used, then use an example to look at the role of contain and cover:

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  mask-size: contain;
  -webkit-mask-size: contain;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/heart1.png');
  mask-size: cover;
  -webkit-mask-size: cover;
}
Copy the code

mask-composite

Mask-composite: Mask-composite: Mask-composite: Mask-composite: Mask-composite: Mask-composite Chrome:clear|copy|destination-over|destination-in|destination-out|destination-atop|source-in|source-out|source-atop|sour Ce – over | xor | plus – lighter, support on Chrome properties is too much, is not convenient to expand, there is the most comprehensive introduction, and the specific composition can see Firefox support value: The add | subtract | intersects | exclude, these attributes can take a look at the specific effect:

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png'), url('.. /img/heart.png');
  -webkit-mask-image: url('.. /img/star1.png'), url('.. /img/heart.png');
  mask-composite: add;
  -webkit-mask-composite: add;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  mask-composite: subtract;
  -webkit-mask-composite: subtract;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  mask-composite: intersect;
  -webkit-mask-composite: intersect;
}
Copy the code

.lake {
  width: 300px;
  mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  -webkit-mask-image: url('.. /img/star1.png'), url('.. /img/heart1.png');
  mask-composite: exclude;
  -webkit-mask-composite: exclude;
}
Copy the code

Browser support

mask:

conclusion

The main purpose of this article is to write the mask attribute is really powerful, but the current browser support is indeed very general, record the related attribute in different browsers support degree and usage, I hope to read this article can help you. If there is a mistake or not rigorous place, welcome criticism and correction, if you like, welcome to praise