我有一个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和一个'before'伪元素,就像Matthew Wilcoxson的解决方案一样。

为了避免在JavaScript中需要访问伪元素来更改图像和其他属性,只需使用inherit作为值,并通过父元素(这里是body)访问它们。

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

其他回答

下面是一个简单的解决方案,适用于现代浏览器,使用纯CSS和一个'before'伪元素,就像Matthew Wilcoxson的解决方案一样。

为了避免在JavaScript中需要访问伪元素来更改图像和其他属性,只需使用inherit作为值,并通过父元素(这里是body)访问它们。

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

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

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

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

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

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

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

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

你可以在你想要应用过滤器的图像上创建一个div,并使用backdrop-filter到它的CSS类。 看看这个链接