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设置为什么，都没有影响。

- user911625

---

那是因为你用 center center 覆盖了它。 - Daut

Answer 1

只需交换顺序：

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

当您指定整个属性-webkit-mask时，它包含所有子属性的值，因此会重置-webkit-mask-size。

如果您将其设置为最后一个，则不会发生这种情况。

或者，单独指定子属性（图像，位置，大小...）

- vals

Answer 2

嗯，我认为可能是你的webkit mask url后面的center center。另外，你应该设置一个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/

- meub