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

现在，通过使用CSS GRID，它变得更加简单和灵活。您只需将模糊的背景（imgbg）与文本（h2）重叠

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

和CSS：

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

如果要使内容可滚动，请将内容的位置设置为绝对：

content {
   position: absolute;
   ...
}

我不知道这是否只适合我，但是如果不是，那就解决了！

同样，由于背景是固定的，这意味着您具有“视差”效果！因此，现在，这个人不仅教您如何制作模糊的背景，而且还具有视差背景效果！

$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);
    }
}

我没有写这个，但是我注意到backdrop-filter使用CSS SASS编译器为部分支持有一个polyfill ，所以如果您有一个编译管道，可以很好地实现（它也使用TypeScript）：

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

在.contentCSS 的标签中将其更改为position:absolute。否则，渲染的页面将无法滚动。

以下是带有``before''伪元素的纯CSS现代浏览器的简单解决方案，例如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 */
}

为此，您需要重新构造HTML。您必须模糊整个元素才能模糊背景。因此，如果您只想模糊背景，则它必须是它自己的元素。