2

そこで、background-size: cover で背景画像を設定しました。これまでのところ動作します。しかし、ぼかしを追加すると、明らかにハードエッジが失われます。ぼやけたエッジを削除するにはどうすればよいですか? 背景を拡大してから、overflow:hidden で切り取る必要があるのではないでしょうか?

img の周りに overflow:hidden を含むラッピング div を使用していたでしょうが、background-size:cover を使用することはできませんよね?

これはどのように見えるかです: http://jsfiddle.net/RyQRY/

そして、これはどのように見えるべきかです: http://cl.ly/image/0B2f191p2m0i

HTML

<div id="background"></div>

CSS

#background {
    position: absolute;
    z-index: -999;
    top: 0px;
    height: 546px;
    width: 100%;
    background-image: url(../img/background.jpg);
    background-size: cover;
    -webkit-filter: blur(50px);
}
4

1 に答える 1