6

CSS を使用して画像をぼかしようとしています。私は「ぼかし」を使用していますが、これも境界をぼかしていることがわかりました。境界線をまっすぐに保ちながら、画像の残りの部分をぼかす方法はありますか?

http://www.inserthtml.com/2012/06/css-filters/

CSS

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
4

5 に答える 5

11

次のようなことを試してください：

HTML:

<div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>​

CSS:

#image{
   filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

何らかの理由で画像の余白が必要なようです (少なくとも Chrome では)。

jsfiddle についても: http://jsfiddle.net/jdwire/HUaBV/1/。

于 2012-11-01T17:59:15.127 に答える
3

その画像をブロック レベルの要素でラップし、画像と一致するようにそのサイズを設定して、overflow: hidden.

于 2012-11-01T17:40:47.850 に答える
0

画像をラップしdivて、画像のサイズdivよりも数ピクセル小さいサイズにします (そうしないと、ぼかしのエッジがトリミングされません)。次にoverflow:hiddendivをつけます。

ここで jsFiddle のデモを参照してください。

于 2012-11-01T17:51:13.293 に答える
0

境界線のある div を囲み、画像をぼかします。

CSS

div.container
{
border:2px solid #000000;
display:inline-block;
}

img.theimage
{
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
}

html

<div class="container">
<img class="theimage" src="iamgesrc.jpg" />
</div>
于 2012-11-01T18:43:47.773 に答える