如何在不模糊元素内文本的情况下模糊元素及其背后的所有内容？ CSS答案

【问题标题】：How to blur an element and everything behind it, without blurring the text within the element? CSS如何在不模糊元素内文本的情况下模糊元素及其背后的所有内容？ CSS
【发布时间】：2018-03-07 00:43:29
【问题描述】：

所以我正在制作一个网站，我希望元素的背景模糊，但我不希望元素中的文本像现在一样模糊。有没有办法做到这一点而不必使用已经完成的图像？ - 搜索引擎优化

你可以在下面的sn-p中看到我当前的一些代码：

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 16px;  
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1); 
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

main {
    width: 800px;
    margin: auto;
}

#welcome {
    color: #fff;
    width: 580px;
    margin: 100px auto;
    font-size: 110%;
    border-radius: 25px;
    border: #fff solid 1px;
    margin-top: 50px;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
    position: relative;
}

#welcome p {
    z-index: 999;
    margin: 10px;
}

<body>
    <main role="main">
        <header id="welcome">
            <p>Content in here</p>
        </header>
    </main>
</body>

更新

好的，我自己解决了这个问题！也许我的问题不够清楚。

我想将父级模糊为一个段落（在本例中为标题标签），而不是模糊段落中的文本。所以模糊的父（标题）后面的所有元素也会变得模糊 - 在这种情况下是背景图像。我想出了如何自己完成这项工作，请参阅下面的 sn-p：

重要提示：背景图片必须是离模糊元素最近的父级（这里body是header的父级），否则模糊效果不起作用。

body {
    background: url('https://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg') fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
}
 header {
    border-radius: 25px;
    position: relative;
    margin: 100px auto;
    width: 500px;
    background: inherit;
    overflow: hidden;
}
 header::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
 header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25)
}
 header h1, p {
    margin: 20px 10px;
    color: #fff;
    position: relative;
    z-index: 1;
}

<body>
    <header>
        <h1>
            Whoo it's working!
        </h1>
        <p>this is also blurring the background</p>
    </header>
</body>

【问题讨论】：

有很多例子 - stackoverflow.com/questions/20039765/…
她是一篇类似的帖子，可能会对您有所帮助。 stackoverflow.com/questions/22406478/…
@Mx。这不是我的问题。在那里，他希望图像模糊，并且仅在涉及图像时才有效。我特别询问了如何在不使用图像的情况下做到这一点。

标签： html css

【解决方案1】：

filter 像opacity 一样工作，它影响元素和任何子元素。所以，使用 ::before 伪元素并对其应用模糊。

JSfiddle Demo

html,
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .1);
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('http://www.crossroadsaugusta.org/wp-content/uploads/2016/02/1418-56c10c706fcbb.jpg') fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
main {
  width: 800px;
  margin: auto;
}
article {
  color: #fff;
  width: 580px;
  margin: 100px auto;
}
#welcome {
  font-size: 110%;
  border-radius: 25px;
  border: #fff solid 1px;
  margin-top: 50px;
  position: relative;
}
#welcome::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .2);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
#welcome p {
  z-index: 999;
  margin: 10px;
}

<main role="main">
  <article>
    <section id="welcome">
      <p>Content in here</p>
    </section>
  </article>
</main>

【讨论】：

当时我对我的问题不够具体。这基本上满足了我在问题中的要求，但我也希望它模糊模糊元素后面的所有内容。幸运的是，我当时自己找到了一个解决方案：P - 我现在只是在编辑这个问题，以便更具体地针对其他可能想要类似东西的用户，并认为我会把它放在那里，你的答案是一个很好的答案~
我没有尝试过，但这是我认为可行的答案，所以正在寻找这个 tio 看看我是否正确。我确信这是最好的方法。

【解决方案2】：

不确定您是否了解背景过滤器，但它允许您将效果应用于 div 后面的任何内容，他们正在努力添加对 Chrome 和 Firefox 的支持，但目前仅受 Safari 支持。无论如何，这是代码，因为我不确定它何时会被支持。

#welcome {
    font-size: 110%;
    border-radius: 25px;
    border: #fff solid 1px;
    margin-top: 50px;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
    -o-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

【讨论】：

不，我没听说过。不过，这听起来很聪明也很简单！我很遗憾地使用 Chrome，所以我将尝试寻找另一种解决方案。我希望他们尽快将其添加到 Chrome 和 Firefox！
是的。我正在等待他们添加对此功能的更多支持，但只是认为您可能希望在他们添加支持时使用它。

【解决方案3】：

在你想要模糊效果的地方放置一个 div 并将filter:blur 添加到 div 类中。

.class {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10'
}

请看演示here

Filters 是 css3 级别的属性，仅适用于现代浏览器。

【讨论】：

【解决方案4】：

.class{
 background: rgb(0,0,0) // fallback for ie8 and lower end browser
 background: rgba(0,0,0,0.5) //0.5 is the opacity value
}

这是解决问题的正确方法，但您必须使用 rbg 值而不是 hexcode。

【讨论】：

这并不能解决我的问题。我要求的是模糊，而不是阴影。