Question

如何使用css3或javascript实时生成与此图像类似的轮廓效果？

http://i.imgur.com/1OEnuKF.jpg

Answer 1

这是使用滤镜和背景混合实现的类似效果

＆＃13;

div {
        width: 180px;
    height: 400px;
    display: inline-block;
}

.test {
    background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg); 
    background-position: 0px 0px, 3px 3px;
    background-size: cover;
    background-blend-mode: difference;
    -webkit-filter: blur(1px)invert(1);
}

.target {
    background: url(http://i.imgur.com/1OEnuKF.jpg); 
    background-position: top right;
    background-size: cover;
}

＆＃13;

<div class="test"></div>
<div class="target"></div>

＆＃13;

图像的左侧部分是从原始图像中获得的;右手是目标图像。

Answer 2

CSS3中有一些过滤效果，仅适用于webkit
我不知道如何使用它们来实现你所展示的效果但我认为他们可以提供帮助
这是一个链接，您可以测试CSS3过滤器并获取CSS代码
http://html5-demos.appspot.com/static/css/filters/index.html
和here你可以看到它的浏览器兼容性
希望有帮助

使用css3生成对图像的轮廓效果

2 个答案: