CSS 如何对背景图像使用 filter 操作？

CSS filter 属性可以用于在网页元素上应用图形效果，例如模瑕、亮度、对比度等。它不仅可以应用于普通的元素，也可以应用于背景图像。要对元素的背景图像使用 filter 操作，通常有以下几种方法：

1. 直接在元素上应用： 可以直接在包含背景图像的元素上使用 filter 属性。这将对元素整体（包括文本内容和背景图像）应用滤镜效果。

css
.background-filter {
  background-image: url('image.jpg');
  filter: blur(5px);  /* 应用模糊效果 */
}

1. 使用伪元素： 如果您只想对背景图像应用 filter 而不影响其他内容，可以使用伪元素来实现。通过将背景图像应用于 ::before 或 ::after 伪元素，并在该伪元素上使用 filter，我们可以确保只对背景图像应用滤镜效果。

css
.background-filter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('image.jpg');
  background-size: cover;
  filter: blur(5px);  /* 应用模糊效果 */
}

.background-filter {
  position: relative;
  z-index: 1;
}

1. 使用父元素的滤镜： 还可以将滤镜效果应用于包含背景图像的元素的父元素。这种方法会让背景图像和任何子元素都受到滤镜效果的影响。

css
.background-filter-parent {
  filter: blur(5px);  /* 应用模糊效果 */
}

.background-filter-child {
  background-image: url('image.jpg');
}

在这些例子中，我们使用了 blur() 函数作为 filter 的值，这将对选中的元素应用模糊效果。CSS filter 还支持其他函数，例如 brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() 和 saturate()，可以根据需要组合使用这些函数来达到不同的视觉效果。

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

在示例中，我创建了两个容器，.background-image并且.content.

两者都与position: fixed和 一起放置left: 0; right: 0;。显示它们的差异来自于z-index为元素设置不同的值。

shell
.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.jpg');
  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>

运行代码片段隐藏结果

展开片段

Matthew Wilcoxson建议使用.content::before以避免第二个 div 的实现： https: //codepen.io/akademy/pen/FlkzB

消除对额外元素的需求，同时使内容适合文档流，而不是像其他解决方案那样固定/绝对。

使用实现

shell
.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.jpg');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

运行代码片段隐藏结果

展开片段

如果您有兴趣删除边缘的白色边框，请使用宽度和高度110%以及左侧和顶部-5%。这会稍微放大你的背景，但不应该有纯色从边缘渗入。

显示代码片段

shell
.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  top: -5%;
  left: -5%;
  right: -5%;
  z-index: -1;

  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.jpg');
  background-size:cover;
  width: 110%;
  height: 110%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Run code snippetHide results

Expand snippet

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

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

您还可以使用backdrop-filter

有一个受支持的属性，称为，目前 Chrome、Firefox、 Edge、Safari 和 iOS Safaribackdrop-filter支持该属性（有关统计信息，请参阅caniuse.com）。

来自Mozilla 开发文档：

background-filter 属性提供诸如对元素后面的区域进行模糊或颜色偏移等效果，然后可以通过调整元素的透明度/不透明度来透过该元素看到这些效果。

请参阅caniuse.com了解使用情况统计信息。

你会像这样使用它。如果您不想让里面的内容变得模糊，请使用实用程序类.u-non-blurred

shell
.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 all major browsers */

  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 child content that should not be blurred */
.u-non-blurred {
  position: relative;
  z-index: 1;
}

<div class="background background-filter">
  <h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>

运行代码片段隐藏结果

展开片段

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

以下是纯 CSS 中现代浏览器的简单解决方案，带有“before”伪元素，如 Matthew Wilcoxson 的解决方案。

为了避免需要访问伪元素来更改 JavaScript 中的图像和其他属性，只需使用inherit作为值并通过父元素访问它们（此处body）。

shell
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 */
}