Question

是否可以在背景图片上使用-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);
}

我一直在搜索，但找不到任何描述如何执行此操作的资源。

Answer 1

未来用户：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);
}

查看this JsFiddle。

Answer 2

不要将它应用于正文，将其应用于如下所示的全尺寸容器，将容器大小和位置设置为绝对，然后将其余内容设置为相对，并设置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/

Answer 3

如果是整页的背景，那么这对我来说是最好的解决方案。

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;
}

是否可以使用-webkit-filter：blur（）;在背景图像？

3 个答案: