本文翻译自: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