The Mask-image property of CSS is detailed

This time to bring you the CSS Mask-image property in detail, the use of CSS Mask-image property considerations are what, the following is the actual case, together to see.

CSS Mask Mask properties are very long history, far more than CSS3 Border-radius and other properties, the earliest appeared in the Safari browser, almost dated back to 09 years.

At that time, however, masks can only be used as experimental properties and do some special effects. After all, the era is also the Internet Explorer, the attributes are good, but the value is limited.

But now the situation has changed greatly, in addition to IE and Edge browser does not support, firefox,chrome and mobile, etc. have been supported, the actual application value is not the same. In particular, the Firefox browser, starting with version 55, has fully supported the CSS3 Mask property. and the Mask attribute specification has entered the candidate recommendation specification, will say that after entering the established standard standards has been a certainty of things, we can rest assured that learning, the future will be useful.

In the past, the CSS Mask property was mask:xxx when used, but now with the normalization of this attribute, the Mask property has actually become the abbreviation of many mask-*, which is the same as background, border nature.

Which attributes are abbreviated, see the following list:

1. Mask-image

2. Mask-mode

3. Mask-repeat

4. Mask-position

5. Mask-clip

6. Mask-origin

7. Mask-size

8. Mask-type

9. Mask-composite

Let's first introduce the use of the Mask-image property.

Mask-image refers to the picture resource used by the mask, the default value is None, which is no matte picture. So, like the Border-style property in the Border property, is a property value that you have to set if you want to have an effect.

Mask-image masks are supported by a wide variety of image types, which can be URL () static picture resources, which are supported in formats including Jpg,png and SVG, and can be dynamically generated images, such as those drawn with various CSS3 gradients. The syntax supports CSS3 of various gradients, as well as the URL () function, image () function, and even the element () function. It also supports multiple backgrounds, so in theory, using mask-image we can mask out any graphics we want, very powerful.

Seeing is believing, we demonstrate the strength of mask-image through a number of cases.

First, all of the following cases use the original diagram as follows:

Let's start with one of the most basic PNG image masks to show.

The CSS code is as follows:

. mask-image {    width:250px; height:187.5px;    -webkit-mask-image:url (loading.png);    Mask-image:url (loading.png);}

The HTML code is as follows:

The final effect, as shown in:

From this most basic case, we can see that the so-called mask, is the original image only shows the opacity of the mask image part. For example, in this case, the loading ring has a color part is the outer circle ring, so finally we see the effect is the original picture, only exposed a circle ring. And the translucent area is also accurately shaded.

Therefore, we rarely use JPG images as masks, because JPG images must be completely opaque, and the final effect is that the original image is not visible.

In addition, if the loading.png load fails, the direct original diagram under the Firefox,chrome browser does not appear.

Then let's look at an SVG graphic matte effect display.

The CSS code is as follows:

. mask-image {    width:250px; height:187.5px;    -webkit-mask-image:url (star.svg);    Mask-image:url (star.svg);}

The HTML code is as follows:

The final effect is similar.

The above is implemented with SVG as a background graph, and now we can use the <mask> element in the SVG drawing as the mask element to implement it.

The CSS code is as follows:

. mask-image {    width:250px; height:187.5px;    -webkit-mask-image:url (#mask);    Mask-image:url (#mask);    /* Firefox external chain also supports *    //* Mask-image:url (ELLIPSE-RECT.SVG#MASK); */}

The HTML code is as follows:

<svg>    <defs>           <mask id= "Mask" maskcontentunits= "Objectboundingbox" >            <!--soften edges-- >            <ellipse cx= ". 5" cy= ". 5" rx= "." ry= "." Fill= "Black" ></ellipse>            <rect x= ". 2" y= "0" Width= ". 6" height= "1" rx= ". 1" ry= ". 1" fill= "BLACK" ></rect>            <!--body Mask www.xttblog.com            -- <ellipse cx= ". 5" cy= ". 5" rx= ". 4" ry= ". 2" fill= "white" ></ellipse>            <rect x= ". 3" y= ". 1" width= ". 4" Height= ". 8" rx= ". 1" ry= ". 1" fill= "white" ></rect>        </mask>    </defs>   </svg> 

Then using the SVG element inline SVG <mask>, see the following implementation.

CSS Code:

. mask-image {    width:250px; height:187.5px;    -webkit-mask-image:url (#mask);    Mask:url (#mask);    Mask-image:url (#mask);    /* Firefox external chain also supports *    //* Mask-image:url (ELLIPSE-RECT.SVG#MASK); */}

The code for the SVG implementation:

<svg>    <defs>           <mask id= "Mask" maskcontentunits= "Objectboundingbox" >            <!--soften edges www.xttblog.com-->            <ellipse cx= ". 5" cy= ". 5" rx= "." ry= "." Fill= "BLACK" ></ellipse>            < Rect x= ". 2" y= "0" width= ". 6" height= "1" rx= ". 1" ry= ". 1" fill= "BLACK" ></rect>            <!--body Matte--            < Ellipse cx= ". 5" cy= ". 5" rx= ". 4" ry= ". 2" fill= "white" ></ellipse>            <rect x= ". 3" y= ". 1" width= ". 4" height= " .8 "rx=". 1 "ry=". 1 "fill=" white "></rect>        </mask>    </defs>   </svg><svg Width= "height=" 186 ">    <image xlink:href=" ps1.jpg "class=" Mask-image "width=" + "height=" 186 "> </image></svg>

Whether it is the Clip-path or the mask here, the support for the outer-chain SVG feature must be weaker than inline SVG. Since Chrome does not even support the <mask> of HTML inline SVG, it certainly does not support the outer-chain SVG file <mask> element mask support.

What about the Firefox browser that was doing well before that?

Fortunately, the Firefox browser recently supported any element outside the chain SVG file <mask>, why say recently? I looked at my current Firefox, show the latest version, version is 56, and then Firefox support any element can use the outer chain SVG <mask> element as the mask is version 55 started.

As for the above, any element inline SVG <mask> support, Firefox has long been supported.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How the hover selector is used

CSS3 's new unit use detailed

CSS to make a picture background filled hexagon