Question

所以我正在创建一个网站，我希望元素的背景模糊，而我不希望元素中的文本变得模糊，就像现在一样。有没有办法做到这一点，而不必使用已经完成所有事情的图像？ - 对于SEO

您可以在下面的代码段中看到我当前的一些代码：

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>

更新

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

我想将父级模糊为段落（在本例中为标题标记），而不会使带有段落的文本模糊。因此模糊的父母（标题）背后的所有元素也会变得模糊 - 在这种情况下是背景图像。我想出了如何自己完成这项工作，看看下面的代码如何：

重要提示：背景图片必须是最接近模糊元素的父级（此处正文是标题的父级），否则模糊效果将无效。

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>

Answer 1

filter的作用类似于opacity，它会影响元素和任何子元素。因此，使用::before伪元素并将模糊应用于此。

JSfiddle Demo

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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级别的属性，仅适用于现代浏览器。

Answer 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。

如何模糊元素及其背后的所有内容，而不模糊元素中的文本？ CSS

4 个答案: