3

到目前为止，我还没有找到任何可以使用 clip 属性替代的东西。我试过唱负边距无济于事。现在我最后的希望是javascript。我已经用谷歌搜索了它，但还没有真正找到我要找的东西。

我想要的是剪辑图片的边缘，因此当将模糊滤镜应用于图像时，边缘不会模糊但很清晰。是的，我确实使用了 svg 过滤器，但找不到使过渡平滑的正确方法

<style>
#content{
background:#fff;
}

.one{
width:455px;
height:213px;
overflow:hidden;
display:inline-block;
vertical-align:top;
}

.one img{
position:relative;
top:-30px;
left:-7px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.one img:hover{
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
</style>

<div id="content">

<span class="one">
<a href="/"><img src="http://0.tqn.com/d/create/1/0/z/I/4/-/forthebirds.jpg" /></a>
</span>

</div>
4

1 回答 1

0

您可以通过以下方式使用 Javascript 剪辑任何图像

  • 创建<canvas>剪切区域大小的标签

  • 使用剪切的源坐标在画布内绘制图像canvas.getContext().drawImage()，也称为切片

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images#Slicing

自然地，具有活跃市场份额的 Microsoft 浏览器可能需要它们自己的 hocus pocus、Flash 扩展或其他任何东西来让 Redmond 高兴。

也因为你很明显在做图像过滤，这可能会让你很感兴趣

http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

http://www.pixastic.com/lib/

于 2013-03-03T00:15:10.450 回答