如果你想要内容是可滚动的，设置内容的位置为绝对:

content {
   position: absolute;
   ...
}

我不知道这是不是只适合我，但如果不是，这就是解决办法!

此外，由于背景是固定的，这意味着你有一个“视差”效果!所以现在，这个人不仅教你如何制作一个模糊的背景，而且它也是一个视差背景效果!

看看这支笔。

您必须使用两个不同的容器，一个用于背景图像，另一个用于内容。

在本例中，我创建了两个容器，.background-image和.content。

它们都被放置在位置:固定和左:0;右:0;。显示它们的差异来自为元素设置的不同的z-index值。

.background-image { position: fixed; left: 0; right: 0; z-index: 1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); width: 1200px; height: 800px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .content { position: fixed; left: 0; right: 0; z-index: 9999; margin-left: 20px; margin-right: 20px; } <div class="background-image"></div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p> <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p> </div>

为Lorem Ipsum的文本道歉。

更新

感谢Matthew Wilcoxson在https://codepen.io/akademy/pen/FlkzB之前使用.content::提供了更好的实现

正如在其他答案中所述，这可以通过以下方式实现:

作为背景的模糊图像的副本。 可以过滤的伪元素，然后将其定位在内容后面。

你也可以使用backdrop-filter

有一个受支持的属性叫做backdrop-filter，目前是 支持Chrome, Firefox, Edge, Safari和iOS Safari(查看caniuse.com统计数据)。

来自Mozilla devdocs:

backdrop-filter属性提供了一些效果，比如对元素后面的区域进行模糊或颜色移动，然后通过调整元素的透明度/不透明度就可以看到元素。

查看caniuse.com了解使用统计数据。

你会这样使用它。 如果你不想让里面的内容被模糊化，使用实用工具类.u-non- ambiguous

.background-filter::after { -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */ backdrop-filter: blur(5px); /* Supported in Chrome 76 */ content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; } .background-filter { position: relative; } .background { background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg'); width: 200px; height: 200px; } /* Use for content that should not be blurred */ .u-non-blurred { position: relative; z-index: 1; } <div class="background background-filter"></div> <div class="background background-filter"> <h1 class="u-non-blurred">Kermit D. Frog</h1> </div>

现在，通过使用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;
      }

不使用伪类from

身体{ 背景:# cecece; font-family: "Scope One"， serif; 字体大小:12 px; 颜色:黑色; 保证金:0汽车; 高度:100%; 宽度:100%; 背景图片: 线性梯度(到底部，rgba(0,0,0,0.8)， rgba(0,0,0, 0.81))， url (https://i.imgur.com/2rRMQh7.jpg); -webkit-background-size:封面; -moz-background-size:封面; -o-background-size:封面; background-size:封面; ｝ 身体身体< > < / >

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