CSS Webkit蒙版图像添加轮廓/边框? [英] CSS Webkit mask image add an outline / border?

问题描述

我正在使用-webkit-mask-box-image和彩色背景上的png文件，以实现所需颜色的形状，而不必每种颜色都有文件.

I'm using -webkit-mask-box-image with a png file on a coloured background to achieve a shape in whatever colour I want without having to have a file in each colour.

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

我将使用更复杂的形状，jsfiddle中的六边形仅是示例:

I'll be using more complex shapes, the hexagon in the jsfiddle is only an example:

http://jsfiddle.net/TtR3b/

是否可以通过任何简单的方法将轮廓添加到生成的形状中?我希望有一些属性或方法可以允许此操作，或者希望有某种方式可以操作蒙版图像以允许轮廓显示?

Is there any easy way I could add an outline to the resulting shape? I'm hoping there is some property or method to allow this or maybe there some way to manipulate the mask image to allow an outline?

我尝试过此方法，但是即使轮廓使用不同的颜色，添加的任何内容也仅构成蒙版的一部分.我唯一的其他选择是叠加一张仅包含我想要的轮廓的多余图像，但是如果有更好的方法，这似乎是浪费的.

I tried this but anything added simply formed part of the mask, even if the outline is in a different colour. My only other option is overlaying an extra image that contains just the outline I want but that seems wasteful if there's a better approach.

推荐答案

因此，我能够使用第一个稍大的第二个图像来实现它.

So I was able to do it using a second image behind the first, slightly larger.

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蒙版图像添加轮廓/边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！