我有一个JPEG文件,我使用作为搜索页面的背景图像,我使用CSS来设置它,因为我在Backbone.js上下文中工作:

background-image: url("whatever.jpg");

我想应用css3模糊过滤器只对背景,但我不确定如何样式只是一个元素。如果我试着:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

就在我的CSS中的background-image下面,它为整个页面设置了样式,而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者,有没有一种方法可以关闭页面上所有其他元素的模糊效果?


当前回答

当然,这不是css解决方案,但你可以使用CDN质子过滤器:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

它来自https://developer.wordpress.com/docs/photon/api/#filter

其他回答

为此,您需要重新构造HTML。为了模糊背景,你必须模糊整个元素。如果你只想模糊背景,它必须是它自己的元素。

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

如果你想要内容是可滚动的,设置内容的位置为绝对:

content {
   position: absolute;
   ...
}

我不知道这是不是只适合我,但如果不是,这就是解决办法!

此外,由于背景是固定的,这意味着你有一个“视差”效果!所以现在,这个人不仅教你如何制作一个模糊的背景,而且它也是一个视差背景效果!

规范引入了一个新的filter()函数,你可以像下面这样使用背景图像:

background: filter(url("whatever.jpg"), blur(5px));

<filter()>函数有两个参数。第一个参数是<image>。第二个是为CSS filter属性指定的筛选器函数列表。该函数接受参数并应用筛选规则,返回一个处理图像。

但是浏览器不支持这个:https://caniuse.com/css-filter-function。目前只能在Safari上进行测试。

当然,这不是css解决方案,但你可以使用CDN质子过滤器:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

它来自https://developer.wordpress.com/docs/photon/api/#filter