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


当前回答

成功应用背景图像的步骤

确保使用link标签正确链接了HTML和CSS <link rel="stylesheet" ref="yourcssdocument.css"> 我不知道相对目录和子目录,所以我不能评论它 对我来说,最好的方法是在css中使用URL链接

#yourcssdoc .image {
   background-image: url("paste your link here with the quotations")
}

其他回答

在CSS的.content选项卡中将其更改为position:absolute。否则,渲染的页面将不可滚动。

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

不使用伪类from

身体{ 背景:# cecece; font-family: "Scope One", serif; 字体大小:12 px; 颜色:黑色; 保证金:0汽车; 高度:100%; 宽度:100%; 背景图片: 线性梯度(到底部,rgba(0,0,0,0.8), rgba(0,0,0, 0.81)), url (https://i.imgur.com/2rRMQh7.jpg); -webkit-background-size:封面; -moz-background-size:封面; -o-background-size:封面; background-size:封面; } 身体身体< > < / >

我没有写这个,但是我注意到使用CSS SASS编译器有一个部分支持的后台过滤器的polyfill,所以如果你有一个编译管道,它可以很好地实现(它也使用TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo

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

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

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