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ブラウザーは、Redmondを幸せにするために、独自のhocus pocus、Flash拡張機能などを必要とする場合があります。

また、あなたは明らかに画像フィルタリングを行っているので、これはあなたの大きな関心事かもしれません

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

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

于 2013-03-03T00:15:10.450 に答える