Inn storybook: CSS mask CSS3 mask/masks

This article was posted on Monday, November 6, 2017, 22:32 and is classified underCSS related. Reading 380 times, 130 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

“Guest officer, come to come to, inside please, today double 11, preferential big reward, have a meal 20% fold, return free listen to a book.” Zhang Chu LAN a listen to, thought this is still quite cost-effective, the big deal to go in a bowl of green vegetables noodles, and then listen to the field of storytelling for free, steady income ah, as expected is poor let me become more intelligent. So the thief walked into the tongfu Inn.

There are many seats, perhaps because of the habit, Zhang Chu LAN found a seat near the door. Just sit down, small 2 on the enthusiasm of the menu handed over, guest officer, you see what you order?

Zhang Chu LAN up and down swept a glance, the back can not help but slightly cool, before also because of chance to come to the inn of similar grade to eat a meal, the price seems not here so expensive ah, can not help but glance around, no wonder there are so many empty seats ah, the eyes of the masses is clear. Glancing back and forth at the price, he finally confirmed that the cheapest dish was tomato-egg soup: “Well, I’ll have tomato-egg soup first to warm me up.”

Then close the menu, handed the small two, small two seems to be some uncertain, hurriedly asked: “these?”

‘Of course not! Zhang Chu LAN’s wisdom opened again, “I am from Guangdong and Fujian. I drink soup to appetizer before eating. After drinking soup, I know what I really want to eat.

“This…… Good!” The mistress can’t seem to ask any questions. Turning around to leave, but was Called by Zhang Chu LAN, “wait, ask, what is the content of your book here? When does it start?”

“Guest officer, today our inn story-telling content is about Musk (Mask) story, 12 o ‘clock!”

Zhang Chulan looked up at the big clock hanging in the hall. Oh, my God, it’s already 11:60, so she crossed her legs and prepared to appreciate it.

Note: this time is a long time to read all the books, about half an hour.

CSS Mask past and present

The CSS mask property has a long history, even longer than CSS3 border-radius and other attributes. It first appeared in Safari, almost back in 2009.

At the time, however, masks were only used as experimental properties for special effects. It was, after all, the era of Internet Explorer, which had great properties but limited value.

However, the situation has changed greatly. With the exception of Internet Explorer and Edge, Firefox, Chrome and mobile are now fully supported, and the practical value of the application is not quite the same. Firefox, in particular, has fully supported the CSS3 mask attribute since version 55. And mask attribute specification has entered the candidate recommended specification list, will say that the future into the established specification standard is a sure thing, we can rest assured to learn, will be useful in the future.

2. View the CSS Mask attributes

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

See the following list of abbreviations for these attributes:

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

These properties are described one by one below.

3. Details about the MASk-image properties of the CSS

Mask-image refers to the image resource used by the mask. The default value is None, i.e., an unmasked image. Therefore, like the border-style attribute in the border attribute, is a value that must be set to be effective.

The mask-image mask supports a wide range of image types, including URL () static image resources, formats including JPG, PNG and SVG are supported; They can also be dynamically generated images, such as images drawn using various CSS3 gradients. Syntactically supports CSS3 gradients, urls (), image(), and even element(). It also supports multiple backgrounds, so in theory, with mask-image we can mask any image we want, which is very powerful.

Seeing is believing, and we demonstrate the power of Mask-Image through a large number of cases.

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

1. The most basic PNG image mask display

The mask image we used is an image named load.png, as follows:

HTML is as follows:

<img src="ps1.jpg" class="mask-image">Copy the code

The CSS code is as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(loading.png); mask-image: url(loading.png); }Copy the code

The final effect is shown below:

Seeing is believing, you can ruthlessly click here: mask-image PNG image effect schematic demo

From the most basic example above, we can see that the mask means that the original image shows only the opaque part of the mask image. For example, in this case, the colored part of the loading ring is the outer ring, so we finally see the original image, only showing one ring after another. And translucent areas are also accurately masked.

As a result, JPG images are rarely used as masks because JPG images are always completely opaque and the end result is that the original image is invisible.

In addition to images using external link address, we directly base64 embedded images are also supported, the effect is the same as above. Do a demo, interested can be ruthless click here: mask-image base64 PNG image mask demo

In addition, if loading. PNG fails, the original image is not displayed in Firefox or Chrome.

2. Display the mask effect of SVG graphics

In addition to masking normal still images, mask-Image also supports masking effects for SVG graphics.

Suppose you have the following SVG graph named star.svg:

The CSS code is as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(star.svg); mask-image: url(star.svg); }Copy the code

The result is that the original image appears as a star patch:

Seeing is believing, you can click here: mask-image SVG graphics mask effect demo

3. Use the <mask> element in the SVG graph as the mask element

The difference between this usage and the above is that only the

defined in SVG is used as a mask, not the SVG element itself.

In terms of definition, we can either use

in inline SVG as a mask, or

in an externally linked SVG file as a mask. It works on normal HTML as well as SVG elements.

In terms of the final performance alone, there is a big compatibility difference between inline or outlink application in normal HTML and application in SVG native, so it is necessary to explain it carefully.

Suppose you have the following SVG code:

< SVG width = "50" height = "50" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < the ellipse cx = "25" cy = "25" rx = "20" ry = "10" fill="#000000" stroke="none"></ellipse> <rect x="15" y="5" width="20" height="40" rx="5" ry="5" fill="#000000" stroke="none"></rect> </svg>Copy the code

This is represented by the following “tampon” shape:

Now we’re going to transform this tampon shape into the mask we need.

In theory, we can put a

tag on

, like the following:

<svg> <defs> <mask id="mask"> <ellipse cx="25" ... ></ellipse> <rect x="15" ... ></rect> </mask> </defs> </svg>Copy the code

Note, however, that if you use it as a CSS mask attribute value, the above direct processing will have no effect. The main problem is that the size can be difficult to identify.

It is common practice to set the maskContentUnits property of the

element to objectBoundingBox, and then limit the dimensions of the shapes in our

element to 1px by 1px.

Thus, the code for SVG

needed for this example should theoretically look like this:

<svg>
    <defs>    
        <mask id="mask" maskContentUnits="objectBoundingBox">
            <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>Copy the code

But it’s not that simple:

SVG <mask>Its mask mode is different from that of ordinary pictures by default, and its mask type isluminance, which is based on brightness to mask. The default mask type for normal images isalphaBased on transparency. Sure, we can passmask-typeormask-modeTo set up the SVG<mask>The mask type isalpha, can be used as:mask-type:alpha.
Therefore, the two shapes of the code above are filled with fill=”white”, which has the highest brightness and represents a full mask. If you put fill=”black”, it’s completely transparent.

Suppose the above SVG code is inline in the page, and we apply the following CSS code:

.mask-image { mask-image: url(#mask); /* #mask */Copy the code

As a result, in Firefox (currently only Firefox supports SVG

masks for any element), the edges of the mask effect are somewhat rough:

Obviously, such mask effect is not satisfactory to us. Fortunately, there is a way to make the edge smoother, that is, to reconstruct a set of shapes with the same shape, slightly larger size, and filled with black, similar to the following:

<svg> <defs> <mask id="mask" maskContentUnits="objectBoundingBox"> <! - soften edges - > < the ellipse cx = "5" cy = "5" rx = "48" ry = "28" the fill = "black" > < / the ellipse > < the rect x = "2" y = "0" width = "6" height = "1" rx=".1" ry=".1" fill="black"></rect> <! - body mask - > < the ellipse cx = "5" cy = "5" rx = "4" ry = "2" the fill = "white" > < / the ellipse > < the rect x = "3" y = "1" width = "4" height = "8" rx=".1" ry=".1" fill="white"></rect> </mask> </defs> </svg>Copy the code

At this point, the edges of our image mask become extremely smooth, as shown in the screenshot below:

When including<mask>When the SVG of the mask is inline on the page, we do not want the SVG to occupy any size, so we need to hide the SVG. At this point, yes cannot be useddisplay:noneOr usevisibility:hiddenHidden, or our mask will lose its effect. Other methods of hiding are needed, for example:
```
svg {
    width: 0; height: 0;
    position: absolute;
}Copy the code
```
Or (-150px is not representative) :
```
svg {
    position: absolute;
    left: -150px; top: -150px;
}Copy the code
```

Let’s look at compatibility on different elements that are called differently and acted on differently. The SVG code is the code with the “soft edges” comment above:

Normal HTML elements are inline in SVG<mask>
The HTML and CSS code is as follows:
```
<img src="ps1.jpg" class="mask-image">Copy the code
```
```
.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(#mask); mask-image: url(#mask); }Copy the code
```
The results show that Chrome does not support:

The Firefox browser performed as expected:

Seeing is believing, you can click here: mask-image inline SVG mask element demo
SVG elements are inline with SVG<mask>
HTML is as follows:
```
<svg width="250" height="186">
    <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186"></image>
</svg>Copy the code
```
CSS is as follows:
```
.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(#mask); mask: url(#mask); mask-image: url(#mask); }Copy the code
```
All browsers, including IE9, performed the desired tampon mask:

Seeing is believing, you can click here: SVG with inline SVG mask element mask demo

The mask-image attribute is not supported in all browsers, including IE9. The

mask for SVG elements is not supported in virtually all browsers except Firefox. It is the mask attribute that works in all other browsers, similar to setting the mask attribute directly on the
element in SVG, like this:
```
<svg width="250" height="186">
    <image xlink:href="ps1.jpg" mask="url(#mask)" width="250" height="186"></image>
</svg>Copy the code
```
That’s why it works. The same applies to SVG elements with fill and stroke in CSS.

While mask-image is CSS specific, SVG itself does not, so if CSS is:
```
.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(#mask); mask-image: url(#mask); }Copy the code
```
It is also supported only by Firefox.
The normal HTML element is linked to an SVG file<mask>
Whether clip-path or mask here, the outlink SVG feature is definitely less supported than inline SVG. Since Chrome doesn’t even support inline HTML SVG

, it certainly doesn’t support mask support for the

element of the external SVG file.

What about Firefox, which has performed well before?

Fortunately, The Firefox browser recently supports

for SVG files that are linked to any element, so why recent? I looked at my current Firefox and it showed the latest version, version 56, and then Firefox support for any element can use the outer chain SVG

element as a mask was version 55 started.

As for the above, inline SVG

support for any element has long been supported by Firefox.

I believe that Chrome browser will support it in the near future, you can wait patiently.
The SVG element is linked to an SVG file<mask>
In testing, this is currently only supported by Firefox.

4. Image () resource as mask element

The following CSS:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: image(url(loading.png), skyblue); mask-image: image(url(loading.png), skyblue); }Copy the code

Because the image() feature is not currently supported by Chrome or Firefox, the above code does not behave as expected as a mask. However, I made a demo page because it might be supported someday, see mask-image image() function and mask effect demo

5. Image-set () resource as mask element

The image-set() function is much more compatible than image(). Although Edge and Firefox are not supported at present, Chrome/Safari/Android can be used without barrier, which means that mobile terminal can be used with ease. The main function of CSS image-set() is to load different image resources on different screen density devices (mentioned in the previous article).

The usage of the CSS is as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: -webkit-image-set(url(loading.png) 1x, url(star.svg) 2x); mask-image: image-set(url(loading.png) 1x, url(star.svg) 2x); }Copy the code

PNG is used as a mask image on the device. Star.svg is used as a mask image when the screen density is larger than 2.

Thus, under the ordinary PC monitor, the mask effect looks like this:

However, if you are using a mobile device or an iMac or Mac Pro, it will look something like this:

，

Seeing is believing, you can click here: mask-image image-set() function and mask effect demo

6. Cross-fade () feature resource as mask element

The image transparency overlay feature cross-fade() I introduced 5 years ago. If you are interested, you can click here to learn about it.

The image-set() feature is currently compatible with Chrome and mobile, but not Edge and Firefox.

The usage of the CSS is as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: -webkit-cross-fade(url(loading.png), url(star.svg), 50%); mask-image: cross-fade(url(loading.png), url(star.svg), 50%); }Copy the code

SVG this image remains 50% transparent.

Therefore, the final mask effect is shown below:

Seeing is believing, you can click here ruthlessly: mask-image cross-fade() and image mask demo

7. Element () resource as mask element

The Element () function allows you to display DOM elements on a page as images, which I introduced earlier, six years ago, by clicking here.

After all these years, firefox still supports the Element () feature and requires the -moz- private prefix.

Suppose the page has a paragraph of HTML like this:

<h4 id="title"> As the title text of the image </h4>Copy the code

The CSS code is as follows:

#title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: -webkit-element(#title); mask-image: -moz-element(#title); mask-image: element(#title); }Copy the code

Then, the mask effect of Firefox browser is as follows:

Seeing is believing, you can click here: mask-image Element () function and mask demo,

8. <gradient> As a mask image

The gradient here can be any type of CSS3 gradient, such as linear-gradient() linear gradient, repeating-Linear-gradient () repeated linear gradient, or radial gradient(). This can be either repeating-radial gradient() or conic-gradient cone-gradient (as long as the browser supports it).

For example, the following CSS code:

.mask-image { width: 250px; Height: 187.5 px; Webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px); Mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0, 1) 12px); }Copy the code

Finally rendered as a texture mask:

Seeing is believing, you can click here ruthfully: mask-image repeat radial gradient with mask demo

The above 8 are the mask image usage supported by mask-image.

4. The CSS mask-mode attribute is introduced in detail

The default value of the mask-mode attribute is match-source, which means that the appropriate mask mode is automatically applied based on the type of resource.

For example, if our mask uses the

element in

in SVG, the calculated value of the mask-mode attribute is luminance, which means brightness based mask. For other scenarios, the calculated value is alpha, which means based on transparency masks.

Therefore, mask-mode supports the following three attribute values:

mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;Copy the code

Because mask-image supports multiple images, mask-mode also supports multiple attribute values, such as:

mask-mode: alpha, match-source;Copy the code

For example, we changed the load.png mask to luminance based, using CSS like this:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(loading.png); mask-image: url(loading.png); -webkit-mask-mode: luminance; mask-mode: luminance; }Copy the code

Result In Firefox:

Mask-mode is currently only supported by Firefox, so Chrome will still see the alpha mask effect, not as light as the image above.

Seeing is believing, you can click here: mask-mode: Luminance with PNG image mask demo

5. Detailed introduction of mask-repeat attributes

The default value for the mask-repeat attribute is repeat, which behaves like the background-repeat attribute.

The following single-attribute values are supported:

mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: no-repeat;
mask-repeat: space;
mask-repeat: round;
Copy the code

At the same time, according to my own test, Chrome and Firefox browsers support both X-axis and Y-axis 2, for example:

mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;Copy the code

Since mask-image supports multiple mask images, mask-repeat also supports multiple attribute values, such as:

mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;Copy the code

Each attribute value has the following meanings:

repeat-x

The level of
xTiling, similar in effect:

repeat-y

vertical
yFlat out.

repeat

Default, horizontal and vertical tiling.

no-repeat

Instead of tiling, you’ll see a mask figure hanging alone in the upper left corner.

space

spacewith
backgroundAnd so on.
space, indicating that the mask image is tiled as much as possible without any clipping.

In my tests, though, Chrome still clipped one edge, but it wasn’t noticeable. The Firefox browser works perfectly.

round

roundIndicates that the mask images are as close together as possible without any gaps and without any clipping. This means that the image may be scaled.

About the specific performance of each attribute value, I specially made a demo, you can click here: mask-repeat different attribute value and mask effect demo

For example, we choosemask-repeatforround, the mask effect will look like this:

6. Detailed introduction of mask-position attributes

Mask-position and background-position support essentially identical attribute values and representations.

For example, mask-position defaults to 0%, which is positioned relative to the upper-left corner.

Supports a single keyword (the default keyword is resolved to center) :

mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;Copy the code

Vertical and horizontal keywords are supported:

mask-position: right top;Copy the code

Support various values:

mask-position: 30% 50%; < mask-position: 10px 5rem;Copy the code

Since mask-image supports multiple mask images, mask-position also supports multiple attribute values, such as:

mask-position: 0 0, center;Copy the code

Mask-position is supported in Both Chrome and Firefox. Chrome also requires the -webkit-private prefix, which Firefox no longer does.

In order to intuitively experience the mask effect of different mask-position attribute values, I specially made an interactive demo page. You can click here: Demo of different mask-position attribute values and mask effect

For example, if the mask-repeat value is no-repeat and the attribute value is top, the mask effect is centered at the top:

7. Detailed description of mask-Clip attributes

The mask-clip attribute is similar to background-clip, but the mask-clip attribute supports more values. The mask-clip attribute supports more SVG elements.

The following attribute values are supported:

mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

mask-clip: no-clip;Copy the code

The default value is border-box, similar to background-clip. Multi-attribute values are also supported:

mask-clip: content-box, border-box;Copy the code

There are a lot of values for attributes, but for common elements, only the first three are effective. Firefox also supports no-clip.

Mask-clip demo: Mask-Clip demo: Mask-Clip demo: Mask-Clip demo: Mask-Clip demo

For example, the CSS is given as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(loading.png); mask-image: url(loading.png); border: 20px solid #34538b; padding: 20px; margin: 20px; }Copy the code

Then we choosecontent-boxEffect:

Fill-box, stroke-box, and view-box have to be associated with an SVG element to be effective, and currently no browser supports them.

8. Details about mask-Origin attributes

Mask-origin is similar to background-Origin in nature, but mask-Origin supports more attribute values, mainly because of the addition of mask-Origin support for SVG elements.

The following attribute values are supported:

mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;Copy the code

The default value is border-box, similar to background-origin. Multi-attribute values are also supported:

mask-origin: content-box, border-box;Copy the code

There are a lot of supported attribute values, but for ordinary elements, the first three are currently in effect.

Mask-origin – > mask-Origin – > mask-Origin – > Mask-Origin – > Mask-Origin – > Mask-Origin

For example, the CSS is given as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(loading.png); mask-image: url(loading.png); border: 20px solid #34538b; padding: 20px; margin: 20px; }Copy the code

Then we choosecontent-boxEffect:

Fill-box, stroke-box, and view-box have to be associated with an SVG element to be effective, and currently no browser supports them.

9. Detailed introduction to mask-size attributes

The mask-size attribute is similar to background-size in nature, and the supported attribute value is also similar to control the size of the mask image.

The default value is auto.

Contain and cover

mask-size: cover;
mask-size: contain;Copy the code

Supports various values (the default height is automatically calculated as auto) :

mask-size: 50%;
mask-size: 3em;
mask-size: 12px;

mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;Copy the code

Multiple attribute values are also supported:

mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;Copy the code

Effect demo, CSS as follows:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(star.svg); mask-image: url(star.svg); -webkit-mask-size: cover; mask-image: cover; }Copy the code

The result looks like this (for Both Chrome and Firefox) :

Seeing is believing, you can click here: mask-size: Cover and picture mask effect demo

X. Introduction to mask-type attributes

The mask-type attribute is similar to mask-mode in that it sets different mask modes. One big difference, however, is that mask-types only work on SVG elements, which are essentially derived from SVG attributes, and are therefore supported in Chrome and other browsers. Mask-mode, however, is a CSS3 attribute for all elements, which is not supported by Chrome and currently only Firefox.

Since this applies only to SVG elements, the default value is shown as the SVG element default mask mode, which is luminance, the luminance mask mode. If you want to support transparency mask mode, you can set it like this:

mask-type: alpha;Copy the code

11. Mask-composite properties in detail

Mask-composite indicates the way in which multiple images are masked at the same time. Supported attribute values include:

mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;Copy the code

The above attribute values are currently only supported by Firefox. The default value of Mask-Composite in Chrome is source-over, which is slightly different from the standard default value of add. The function is the same, indicating that multiple image mask effects are cumulative.

The definition of each attribute value is as follows:

add: Masks add up.
subtract: Masks subtract. That is, the overlap of mask images is not displayed. Meaning the more mask images, the smaller the mask area.
intersect: Masks intersect. This is where the mask images overlap to show the mask.
exclude: Mask exclusion. That is, the overlap between the images behind the mask is excluded and treated as transparent.

In order to demonstrate the different performance of different mask-Composite property values, we specially made an interactive demo. You can click here: Mask-Composite property values and mask effect Demo

Demo uses CSS code:

.mask-image { width: 250px; Height: 187.5 px; -webkit-mask-image: url(loading.png), url(star.svg); mask-image: url(loading.png), url(star.svg); }Copy the code

For example, in Firefox, selectmask-composite:subtract, the effect is shown in the screenshot below:

Twelve, the end of the book

Finally said the end of the book, Zhang Chu LAN meaning more, tomato egg soup also forget to eat already cool, hurriedly wolfed down to eat, then let small 2 pay.

Small two come over a look, slightly displeased: “guest officer, you no longer point of what?”

“It’s not that I don’t want to order it. It’s cold, and I’ll have no appetite for anything else. So pay the bill ~ “Zhang Chu LAN hey hey smile.

“This…… , the small second hesitated, I ask the owner’s wife……”

“Yi?” Zhang Chu LAN feel something wrong, want to withdraw. Is getting up, suddenly leap out of the door five three black number of people will Be Surrounded by Zhang Chu LAN. “Boy, you eat so many things also want to go, you listened to the complete book but there is at least 100 yuan of minimum consumption, quick pay money, or don’t blame my fist not long eyes”.

The atmosphere is suddenly unusual nervous, Zhang Chu LAN considers, a total of 43 yuan 8 horn on his body, the root is not enough to have a meal charge. I guess I have to force it. Then pointing to the direction of the book, he shouted, “Madame, it’s me!” They can not help but look, Zhang Chulan immediately start thunder formula, flash to the door. This thought has fled, suddenly see two fingers straight force his chest, at the same time came the voice “sunflower point point hand”, see is about to hit, Zhang Chulan a power, use thunder mot three order thunder step, half turned around, fingers wipe clothes and over, good risk. Focus on a look, the original is just a small two, from just move can see that this person martial arts is not cheap, it seems that the inn is the land of hidden dragon crouching tiger should not stay long. So, Zhang Chu-lan touched her pocket and threw it at her. At the same time, she shouted, here is the 100 yuan you want. Small two subconscious hands to catch, and then turn back, Zhang Chulan has used thunder formula to escape to no shadow.

“Oh, you run fast!” Little two cold cry to. Then he opened his hand, looked at the money he had caught, and spat out a mouthful of old blood, containing only ten dollars. Clenched his fist, he growled in a low voice, “Boy, the next time YOU meet my thief, you’ll have to pay for it!”

This is the end of this article, I hope the content of this article can help you learn. In addition, writing in a hurry, mistakes are inevitable, welcome correction.

MDN document CSS/ MASK is for reference

Thanks for spending so much time reading!

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

// Want a tip? Click here. Got something to say? Click here.

– Webkit-box-reflect attribute introduction and element mirror reflection implementation (1.000)
Three pure CSS methods for hollow 12-color rainbow gradient ring (0.800)
As3 Write flash effects menu (15) (0.200)
As3 Write flash effects menu (20) (0.200)
CSS3 text-fill color introduction and Application demonstration (0.200)
Implementation and Application of circular mask effect under CSS3
CSS3 and text gradient light flow animation effect (0.200)
CSS3/SVG Clip-path Clipping Mask Attributes
Realization of fuzzy Effect of Ground-glass in Dynamic Part of Picture
CSS3 WebKit color bar text effect implementation (0.200)
Jquery plugin (random-0.200)

Tags: mask, mask-clip, mask-composite, mask-image, mask-mode, mask-Origin, mask-position, mask-repeat, mask-size, mask

Inn storybook: CSS mask CSS3 mask/masks