css - Webkit-mask-size 不起作用

Question

我正在尝试使用 webkit-mask-size 使蒙版图像更小。像这样：

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

应用了 myClass 的 div 有一个父容器，该容器上设置了固定的高度。

无论我为它设置什么 -webkit-mask-size 都没有区别。

Answer 1

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 ...)

Answer 2

唔。我认为它可能是您的 webkit 掩码 url 之后的中心。您还应该设置一个 webkit-mask-position。看看这段代码：

.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);
}

它对我有用......这是小提琴：http: //jsfiddle.net/U9axq/