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

只需交换订单：

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

如果你设置了最后一个，那就不会发生。

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

Answer 2

嗯。我认为它可能是你的webkit掩码网址后的中心。您还应该设置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/

Webkit-mask-size无法正常工作

2 个答案: