html - 在 header 中使用带有 "blur"的图像

Question

我试图让我的背景图像模糊..然后在它上面有文本和按钮..但模糊也会模糊文本和按钮，我不确定如何将两者分开。

header {
   background: url("street-238458.jpg") no-repeat center;
   -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
   filter: blur(5px);
   background-size: 100% 100%;
   height: 630px;
}

<header>

<div class="container-fluid">
<div class="text-center">
<h1 class="heading">My h1 is here... blah blah</h1>
<p>We help people out, every day.</p>
<button class="btn btn-lg btn-danger heading" href="#">This is the button</button>
</div>
</div>

</header>

Answer 1

您的标题可以有 2 个不同的容器，因此您可以在不影响内容的情况下设置背景容器的样式。查看评论中的引用。