Webkit-mask-size 不起作用答案

【问题标题】：Webkit-mask-size not workingWebkit-mask-size 不起作用
【发布时间】：2013-08-28 16:24:03
【问题描述】：

我正在尝试使用 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 都没有区别。

【问题讨论】：

那是因为你用center center覆盖它

标签： css webkit

【解决方案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。

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

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

【讨论】：

【解决方案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/

【讨论】：