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

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

你也可以使用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>

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

content {
   position: absolute;
   ...
}

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

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

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

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

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

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

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

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

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

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

这个答案是为材料设计水平卡片布局动态高度和图像。

为了防止由于卡片的动态高度而导致图像失真，您可以使用带有模糊的背景占位符图像来调整高度的变化。

解释

The card is contained in a <div> with class wrapper, which is a flexbox. The card is made up of two elements, an image which is also a link, and content. The link <a>, class link, is positioned relative. The link consists of two sub-elements, a placeholder <div> class blur and an <img> class pic which is the clear image. Both are positioned absolute and have width: 100%, but class pic has a higher stack order, i.e., z-index: 2, which places it above the placeholder. The background image for the blurred placeholder is set via inline style in the HTML.

Code

.wrapper { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23); background-color: #fff; margin: 1rem auto; height: auto; } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { display: block; width: 200px; height: auto; overflow: hidden; position: relative; border-right: 2px solid #ddd; } .blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .pic { width: calc(100% - 20px); max-width: 100%; height: auto; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .pic:hover { transition: all 0.2s ease-out; transform: scale(1.1); text-decoration: none; border: none; } .content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 20px; overflow-x: hidden; } .text { margin: 0; } <div class="wrapper"> <a href="#" class="link"> <div class="blur" style="background: url('https://i.imgur.com/5SZI6qZ.jpeg') 50% 50% / cover;"></div> <img src="https://i.imgur.com/5SZI6qZ.jpeg" alt="Title" class="pic" /> </a> <div class="content"> <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p> </div> </div>