是否可以使用-webkit-filter：blur（）;在背景图像？ [英] Is it possible to use -webkit-filter: blur(); on background-image?

问题描述

是否可以在background-image上使用 -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）; 
} 
  

我一直在寻找一段时间，但找不到任何资源描述如何做：不支持在IE7，IE8，IE9中使用此功能。

，IE10，IE11或当前版本的EDGE。

请勿在真实网站上使用，除非您有后备。 >

如果您正在寻找不依赖额外标记的解决方案，则可以将背景图像和过滤器应用到正文上的伪元素。 / p>

  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; / *保持背景背后的内容* / 
 height：20％; width：20％; / *使用Glen Maddern的技巧/通过@mente * / 
 
 / *不要忘记使用你需要的前缀* / 
 transform：scale（5）; 
 transform-origin：top left; 
 filter：blur（2px）; 
} 
  

查看此JsFiddle 。

Is it possible to use -webkit-filter: blur(); on background-image?

I have tried this code and it just blurs everything but the background-image:

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

I have been searching for a while but cannot find anyone resources describing how to do this.

解决方案

FUTURE USERS: This is not supported in IE7, IE8, IE9, IE10, IE11 or the current version of EDGE.

DO NOT USE on a real site, unless you have a fallback.

If you're looking for a solution that doesn't rely on extra markup, you could apply the background image and filter to a pseudo element on the body.

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

Check it out this JsFiddle.

这篇关于是否可以使用-webkit-filter：blur（）;在背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！