CODEWITHSUNDEEP
csswebkit
user911625
user911625

Reputation:

Webkit-mask-size not working

I'm trying to use webkit-mask-size to make a mask image smaller. Like this:

.myClass {
    width: 100%;
    height: 100%;
    background: #ffffff;
    -webkit-mask-size: 50% 50%;
    -webkit-mask: url(../css/images/myimage.png) center center;
}

The div which has myClass applied to it has a parent container which has a fixed height set on it.

Whatever I set -webkit-mask-size to it makes no difference.

Upvotes: 6

Views: 13424

Answers (2)

vals
vals

Reputation: 64174

Just swap the order:

.myClass {
    width: 100%;
    height: 100%;
    background: #ffffff;
    -webkit-mask: url(../css/images/myimage.png) center center;
    -webkit-mask-size: 50% 50%;
}

When you specify the whole property, -webkit-mask, it contains values for all the subproperties, so it resets the -webkit-mask-size.

If you set that the last, that won't happen.

Alternatively, specify the subproperties individually (image, position, size ...)

Upvotes: 9

meub
meub

Reputation: 2308

Hmm. I think it might be that center center after your webkit mask url. Also you should set a webkit-mask-position. Take a look at this code:

.myClass {
    width: 100%;
    height: 100%;
    background: red;
    /*-webkit-mask-size: 50% 50%;*/
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 200px 200px;
    -webkit-mask-image: url(https://dl.dropboxusercontent.com/u/535060/mask.png);
}

It works for me... Here is the fiddle: http://jsfiddle.net/U9axq/

Upvotes: 1

Related Questions