6

画像をぼかすと、オーバーフローを非表示に指定しても、親コンテナーからオーバーフローします。ぼやけたエッジを寸法内に保つ方法はありますか?

画像は、タグ内ではなく、CSS の背景である必要があります

動作しない例:

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

4

2 に答える 2

9

marginこれは、子要素とoverflow:hidden親要素にa を適用することで実現できます。

.box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
    height:300px;
    width:300px;
}

ここで例を参照してください: http://jsfiddle.net/n1ck/tMjsJ/5/

Joshuaが指摘したように、これはここで使用されているのと同じ手法です: CSS3フィルターぼかしを使用した定義済みエッジ

于 2013-03-08T03:08:25.377 に答える
2

どうやら、これは背景画像では機能しないようです。非常に興味深い発見:)同様の、しかし正確ではない投稿がここに示されました：

CSS3 フィルター ブラーを使用したエッジの定義

同じ効果を達成したい場合は、幅/高さ 100% を使用して、背景画像を含む div を使用することから画像自体に変更してみてください。

編集: @N1ck の回答を確認してください。負のマージン (-1px でも) を適用すると、適切な効果が得られるようです。良い。

また、にじみの背景色 (白) を回避するか、少なくともより適切に管理するには、画像に加えて背景色を設定してみてください。

于 2013-03-08T02:52:06.617 に答える