Question

我试图让我的背景图像变得模糊......然后在它上面有文字，按钮..但模糊也模糊了文字和按钮，我不知道如何分开2。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的标题可以有2个不同的容器，因此您可以设置背景容器的样式而不会影响内容。查看评论中的参考文献。

Answer 2

这pen应该是你想要的。归功于各自所有者。诀窍是有两个独立的容器，外容器应该有背景图像。

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

  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;

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

使用＆＃34;模糊＆＃34;在标题中使用图像

2 个答案: