Talk about image masking effect-webkit-mask

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.