34

-webkit-filter: blur();背景画像に使用することはできますか？

私はこのコードを試しましたが、背景画像以外のすべてがぼやけています。

body {
  background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg');
  background-attachment: fixed;
  -webkit-filter: blur(5px);
}

私はしばらく探していましたが、これを行う方法を説明しているリソースを見つけることができません。

4

3 に答える 3

48

将来のユーザー：これは、IE7、IE8、IE9、IE10、IE11、または現在のバージョンのEDGEではサポートされていません。

フォールバックがない限り、実際のサイトでは使用しないでください。

余分なマークアップに依存しないソリューションを探している場合は、背景画像を適用して、体の疑似要素にフィルターをかけることができます。

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(http://lorempixel.com/420/255);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}

このJsFiddleをチェックしてください。

于 2013-08-11T02:23:28.943 に答える
21

本体には適用せず、以下のようにフルサイズのコンテナーに適用し、コンテナーのサイズと位置を絶対値に設定してから、残りのコンテンツを相対値に設定し、zインデックスを設定します。

​<body>
<div class="bgImageContainer">
</div>
<div class="content"> Some text and stuff here</div>
</body>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.bgImageContainer{
    background-image:url('http://www.whitegadget.com/attachments/pc-wallpapers/16950d1224057972-landscape-wallpaper-blue-river-scenery-wallpapers.jpg'); 
    width:500px;
    height:400px;
    -webkit-filter: blur(5px);
    z-index:0;
    position:absolute;
}
.content{
    z-index:10;
    position:relative;
}

編集-フィドルを更新しました。古い画像は機能しなくなりました。

http://jsfiddle.net/Yr2zD/1130/

于 2012-10-31T22:23:32.493 に答える
4

全ページの背景であれば、これが私にとって最良の解決策です。

body {
    //background-color: black;  use it if you don't want the background border
}
body:before {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg'); // your image
    background-position: center center;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: cover;
    filter: blur(2px);
    z-index: -9;
}
于 2017-08-29T07:16:49.677 に答える