如何将CSS滤镜应用于背景图像

本文翻译自：How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: 我有一个JPEG文件，正在将其用作搜索页面的背景图像，并且由于要在Backbone.js上下文中进行工作，所以我正在使用CSS进行设置：

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

I want to apply a CSS 3 blur filter only to the background, but I'm not sure how to style just that one element. 我想一个CSS 3模糊滤镜仅适用于背景，但只是一个元素，我不知道如何风格。 If I try: 如果我尝试：

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

just underneath background-image in my CSS, it styles the whole page, rather than just the background. 在CSS的background-image下方，它为整个页面设置了样式，而不仅仅是背景。 Is there a way to select just the image and apply the filter to that? 有没有办法只选择图像并对其应用滤镜？ Alternatively, is there a way to just turn the blur off for every other element on the page? 另外，是否有一种方法可以仅关闭页面上所有其他元素的模糊效果？

---

#1楼

参考：https://stackoom.com/question/1M5G1/如何将CSS滤镜应用于背景图像

---

#2楼

You need to re-structure your HTML in order to do this. 为此，您需要重新构造HTML 。 You ha