如何在不影响页面上任何其他内容的情况下使页面的背景图像模糊？

Question

如何使用图像作为我的页面背景并添加模糊效果而不影响页面上的其他内容或图像本身的 sizing/positioning？我确实尝试研究这个问题，但我找不到任何真正帮助我的解决方案。如果这已经 asked/answered 很多，我深表歉意。我尝试过的事情：

我将我的背景图片添加到正文选择器并添加了 filter: blur; 和 -webkit-filter: blur;（我从 w3schools 教程中获得了这些，我实际上不知道我是否两者都需要），但这会影响页面上的所有内容，而不仅仅是我假设无论如何都会发生的背景。
我也尝试通过将我的背景图像添加到正文来做同样的事情，但是使用了 backdrop-filter: blur;，它有点奏效，但它没有模糊边缘屏幕或任何未放置内容的区域。我做了什么：

  body {
  background: url("https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2014/11/bloodborne-newhunter-03.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(5px);
}

最后，我尝试创建一个 <div> 标签并向其中添加我的背景图片，以及 filter: blur; 和 -webkit-filter: blur;。一开始什么都没有出现，但我了解到这是因为我使用了一个空的 <div> 标签。我实际上并不确定我应该在 div 标签中放入什么，我尝试使用填充和其他东西，但我真的不知道该怎么做。背景图片最后变得很不稳定，我不知道如何让它覆盖页面的整个背景，而且项目也不能像它只是一部分一样放在上面背景。我尝试了什么（我几乎是从 w3schools 复制的，所以我什至不知道它的全部作用）：

<div class="bg-image"></div>

.bg-image {
  background-image: url("https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2014/11/bloodborne-newhunter-03.jpg");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

那么简单地向我的页面添加背景图像然后对其进行模糊处理的最佳方法是什么？如果这有一个非常简单的解决方案，我很抱歉，我仍然是编码的新手，而且刚刚从休息中恢复过来，所以我仍然处于学习的早期阶段。这也是我第一次 post 在这个网站上，如果我做错了，我深表歉意。

Answer 1

在 body 之后，您需要在页面其余部分之前添加一个 <div> 标签 css 属性:backdrop-filter: blur (1px);。

这是一个例子：

body {
  margin: 0;
  padding: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
  color: #fff;
  width: 100%
}

main {
  width: 50%;
  border: 5px solid red;
}

#amazing__filter{
  backdrop-filter: blur(4px);
  background: #ffffff20;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
footer {
  width: 100%;
  height: 40px;
}

<html>
  <head>
  </head>
  
  <body>
    <div id="amazing__filter">
      <main>
       <header>
        <h1>
         A spectacular solution to the problem
       </h1>
      </header>
       <h2>
         List of the same words to fill the page
       </h2>
       <ol>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
          <li>List element</li>
        </ol>
      </main>
      <aside>
      </aside>
      <footer>
       <p>Footer</p>
      </footer>
    </div>
  </body>
</html>

如何在不影响页面上任何其他内容的情况下使页面的背景图像模糊？

How do I make the background image for my page blurry without affecting any of the other content on the page?

html

css

background-image