我有一个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 */
}

其他回答

div { background: inherit; width: 250px; height: 350px; position: absolute; overflow: hidden; /* Adding overflow hidden */ } div:before { content: ‘’; width: 300px; height: 400px; background: inherit; position: absolute; left: -25px; /* Giving minus -25px left position */ right: 0; top: -25px; /* Giving minus -25px top position */ bottom: 0; box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3); filter: blur(10px); }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

成功应用背景图像的步骤

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

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

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

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

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

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