我有一个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下面，它为整个页面设置了样式，而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者，有没有一种方法可以关闭页面上所有其他元素的模糊效果?
当前回答
正如在其他答案中所述，这可以通过以下方式实现:
作为背景的模糊图像的副本。 可以过滤的伪元素，然后将其定位在内容后面。
你也可以使用backdrop-filter
有一个受支持的属性叫做backdrop-filter，目前是 支持Chrome, Firefox, Edge, Safari和iOS Safari(查看caniuse.com统计数据)。
来自Mozilla devdocs:
backdrop-filter属性提供了一些效果，比如对元素后面的区域进行模糊或颜色移动，然后通过调整元素的透明度/不透明度就可以看到元素。
查看caniuse.com了解使用统计数据。
你会这样使用它。 如果你不想让里面的内容被模糊化，使用实用工具类.u-non- ambiguous
.background-filter::after { -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */ backdrop-filter: blur(5px); /* Supported in Chrome 76 */ content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; } .background-filter { position: relative; } .background { background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg'); width: 200px; height: 200px; } /* Use for content that should not be blurred */ .u-non-blurred { position: relative; z-index: 1; } <div class="background background-filter"></div> <div class="background background-filter"> <h1 class="u-non-blurred">Kermit D. Frog</h1> </div>
其他回答
规范引入了一个新的filter()函数，你可以像下面这样使用背景图像:
background: filter(url("whatever.jpg"), blur(5px));
<filter()>函数有两个参数。第一个参数是<image>。第二个是为CSS filter属性指定的筛选器函数列表。该函数接受参数并应用筛选规则，返回一个处理图像。
但是浏览器不支持这个:https://caniuse.com/css-filter-function。目前只能在Safari上进行测试。
不使用伪类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:封面; ｝ 身体身体< > < / >
为此，您需要重新构造HTML。为了模糊背景，你必须模糊整个元素。如果你只想模糊背景，它必须是它自己的元素。
虽然所有提到的解决方案都非常聪明，但当我尝试它们时，它们似乎都有一些小问题或与页面上的其他元素产生潜在的连锁影响。
最后，为了节省时间，我只是回到了我以前的解决方案:我使用Paint。选择效果，高斯模糊，半径5到10像素，保存为页面图像。: -)
HTML:
<body class="mainbody">
</body
CSS:
body.mainbody
{
background: url('../images/myphoto.blurred.png');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
编辑:
我终于让它工作了，但解决方案绝不简单!在这里看到的:
过滤器:模糊(1 px);不能在firefox, IE和opera中工作
CSS网格对我来说更容易理解。：）
html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 6fr 1fr; grid-template-rows: 1fr 6fr 1fr; grid-template-areas: '. . .' '. content .' '. . .'; justify-content: center; align-items: center; } .backbround { width: 100%; height: 100%; grid-area: 1/1/5/5; background-image: url(https://i.imgur.com/aUhpEz3.jpg); filter: blur(5px); background-position: center; background-repeat: no-repeat; background-size: cover; } .content { height: 200px; position: relative; grid-area: content; display: flex; justify-content: center; align-items: center; color: white; } <div class="container"> <div class="backbround"></div> <div class="content"><h1>Hello World</h1></div> </div>
