Question

我在彩色背景上使用带有png文件的-webkit-mask-box-image来获得我想要的任何颜色的形状，而不必在每种颜色中都有文件。

background-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");

我将使用更复杂的形状，jsfiddle中的六边形只是一个例子：

http://jsfiddle.net/TtR3b/

有没有简单的方法可以为生成的形状添加轮廓？我希望有一些属性或方法允许这个或者有一些方法来操纵蒙版图像以允许轮廓？

我试过这个，但是任何添加的东西都只是掩模的一部分，即使轮廓是不同的颜色。我唯一的另一个选择是覆盖一个只包含我想要的轮廓的额外图像，但如果有更好的方法，这似乎很浪费。

Answer 1

所以我能够使用第一个稍大的背后的第二个图像来做到这一点。

HTML

<div id="maskborder">
    <div id="mask"></div>
</div>

CSS

#mask{
    position:absolute;
    width: 98%;
    height:98%;
    top:1%;
    left:1%;
    background-color: blue;
    -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

#maskborder{
    position:absolute;
    width: 50%;
    height:50%;
    background-color: red;
    -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

编辑：http://jsfiddle.net/TtR3b/2/

CSS Webkit掩码图像添加大纲/边框？

1 个答案: