Question

如何制作 effect 使用此image

我必须在许多图像上使用此效果，因此我无法使用白色效果图像。

有可能吗？

Answer 1

您可以在 Pseudo Elements 之后或之前尝试进行此操作。

.pillar:after, .pillar:before {
  position: absolute;
  content: '';
  height: 350px;
  width: 64px;
  top: 16px;
  left: 70px;
  background-image: url(http://www.indonesia.travel/public/media/images/upload/poi/Danau%20Segara%20Anak%20-%20Gallery.jpg);
}

Answer 2

是的，有可能在这里你可以下载插件：http://almogbaku.github.io/imageMask/

创建图片元素

<img src="image.jpg" class="mySelector" />
创建蒙版图像（黑色将保持不变，透明将切割）掩蔽
将imageMask查询添加到ready事件中。使用函数.imageMask（path_to_mask）

$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png" ); } );
您可以添加一些回调处理程序

$( document ).ready( function() { $( ".mySelector" ).imageMask( "mask.png", function( $canvas ) { console.log( 'Do something here!', $canvas ); } ); } );
DONE！

Answer 3

基本上可以在很多方面实现。

我认为最简单的方法是创建一个＆＃34;掩码＆＃34;所有白线，并使用透明背景。然后简单地将你的面具放在你的图像上，瞧。

修改

这是你的面具：Click !

编辑2

如果你想保护你的图像免受拷贝，可能最好不上传它，只是显示修改后的img online =）

如何在图像上产生白线效果

3 个答案: