Talk about image masking effect-webkit-mask

will use PS children's shoes must know the "mask" concept, it can achieve a certain mask effect on the picture, of course, here we do not introduce the mask in PS, but the introduction of the use of CSS3 new attributes-webkit-mask to achieve the image mask effect in the Web page.

You may not be familiar with-webkit-mask this attribute, perhaps a lot of people are the first time to see, yes, this property is not yet supported by many browsers CSS properties, currently supports this property only -webkit- prefix Google and Safari browser , but I believe that in the near future this attribute will be supported by other mainstream browsers, let's take a peek at the quick.

Let's start by describing its property values, which can be written in two ways (picture masks, gradient masks):

I. Photo Masks

{    : url ("images/logo.png") no-repeat; : URL ("Images/mask.png");}     

Its property values are basically the same as background's syntax, and related properties are Webkit-mask-clip, Webkit-mask-position, Webkit-mask-repeat, and so on.

Here's how it's implemented:

It is important to note that the transparency (Alpha) value of the black part of the second mask.png is 1, and the picture area below it will be fully displayed, while the remainder will have a transparency of 0 (alpha value), covering the area of the picture below it completely.

Second, the gradient mask

{    : url ("images/logo.png") no-repeat; : -webkit-gradient (linear, left top, right bottom, from (Rgba (0,0,0,1)), to (Rgba (0,0,0,0)));}     

Its property value is the CSS gradient old syntax:-webkit-gradient (<type>, <point> [, < Radius>,]?, <point> [, <Radius>]? [, <stop>]*)

and the new syntax:-webkit-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop> ]*) After my test found not supported

As follows:

Third, the logo mask dynamic effect

Using-webkit-mask we can also make cool logo mask animation effect, with JS control to move the mask. As follows:

The implementation code is as follows:

$ (function() {     $ (". Mask"). MouseOver (function() {          var b=0,c=$ (this),          D=setinterval (function() {               if(b>parseint (C.width () +50)) {clearinterval (d);}               C.css ({"-webkit-mask": "-webkit-gradient (Radial,", "+b+", "255", "+ (b+15) +", from (Rgba (255,, 255,1)), Color-stop (0.5,rgba (255, 255, 255, 0.2)), to (RGBA (255, 255, 255,1))) "}";               b+ +;           },0);     } );

Dynamically change the position of the matte layer gradient by setinterval.

We can also change the starting and ending positions of the gradient to achieve different effects:

0 0 0 0, "+ (b+15) +", from (RGBA (255, 255, 255,1)), Color-stop (0.5,rgba (255, 255, 255, 0.2)), to (RGBA (255, 255, 255,1)) )

Well, isn't it cool?

But in addition to WebKit browser other than the browser does not support Oh, if the browser compatibility requirements are very high, but in the sense of gradual enhancement, there is better than no good, see it doesn't matter, right?

Over~ welcome comments.

Original articles, reproduced please note from a radish a pit-blog Park [Http://www.cnblogs.com/luozhihao]
This address: http://www.cnblogs.com/luozhihao/p/4785076.html

Talk about image masking effect-webkit-mask