CODEWITHSUNDEEP
css
user1476425
user1476425

Reputation: 9

css mask-image not working

Any idea on why the flag isn't filling the h2 text below? Dev url: http://runnerupapparel.com/building/ (info panel)

The background url is linking correctly: http://runnerupapparel.com/building/images/usa.png

h2.usa {
  background-size: 100px auto;
  -webkit-mask-image: url(../images/usa.png);
  -o-mask-image: url(../images/usa.png);
  -moz-mask-image: url(../images/usa.png);
 -ms-mask-image: url(../images/usa.png);
 mask-image: url(../images/usa.png);
 letter-spacing: -2px;
 font-weight: bold;
}

Upvotes: -1

Views: 5433

Answers (1)

Jen
Jen

Reputation: 584

What is the effect you are trying to achieve?

The image you are using is 100% opaque throughout. The mask-image is only beneficial when the png image used has different transparency parts. It essentially applies the transparency properties of the png image to whatever you are using it on.

For a better example of what I mean: http://www.benbarnett.net/2010/11/01/css3-text-effects-with-webkit-masking/

I have taken your image, desaturated it, and quickly removed all the areas that are white (made them transparent). Replace your mask-image URL with the one that I edited and you can see the difference: http://i49.tinypic.com/xe278p.png

It is also worth noting that at this time, mask-image only works with webkit browsers (ex. Chrome).

Upvotes: 1

Related Questions