css - 阻止模糊的标题图像稍微透明

Question

我正在处理一个缩小到 40 像素的标题 + 滚动时模糊背景图像，效果很好，但是当我滚动时，由于模糊，您可以看到内容通过模糊的标题达到峰值当您向下浏览页面时。我仍在学习所有的 css 转换和过滤器，所以我想知道是否有办法防止这种情况发生？

我的代码是

.blur-header{
   height:40px;
   -webkit-filter: blur(10px) brightness(1);
   -moz-filter: blur(10px) brightness(1);
   -o-filter: blur(10px) brightness(1);
   -ms-filter: blur(10px) brightness(1);
   transition: all 0.3s ease-in-out;
}

我创建了一个示例来准确显示模糊图像的不透明度是怎么回事:

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 10) {
    $('header').addClass('blur-header');
  } else {
    $('header').removeClass('blur-header');
  }
})

* {
  margin: 0 auto;
}

header {
  width: 100%;
  height: 200px;
  position: fixed;
  text-align: center;
  font-size: 40px;
  background-image: url("http://www.theyucatantimes.com/wp-content/uploads/2018/01/pet.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s ease-in-out
}

.blur-header {
  height: 40px;
  -webkit-filter: blur(10px) brightness(1);
  -moz-filter: blur(10px) brightness(1);
  -o-filter: blur(10px) brightness(1);
  -ms-filter: blur(10px) brightness(1);
  transition: all 0.3s ease-in-out;
}

.main-content {
  width: 80%;
  padding-top: 200px;
}

img {
  margin: 30px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>HEADER TEXT</header>

<div class="main-content">
  <img src="https://cdn2-www.dogtime.com/assets/uploads/gallery/newfoundland-dogs-and-puppies/newfoundland-dogs-puppies-1.jpg">

  <img src="https://cdn2-www.dogtime.com/assets/uploads/gallery/newfoundland-dogs-and-puppies/newfoundland-dogs-puppies-1.jpg">

  <img src="https://cdn2-www.dogtime.com/assets/uploads/gallery/newfoundland-dogs-and-puppies/newfoundland-dogs-puppies-1.jpg">

  <img src="https://cdn2-www.dogtime.com/assets/uploads/gallery/newfoundland-dogs-and-puppies/newfoundland-dogs-puppies-1.jpg">
</div>

Answer 1

您需要将模糊量从 10px 减少到 3-5px 左右；

.blur-header{
   height:40px;
   -webkit-filter: blur(3px) brightness(1);
   -moz-filter: blur(3px) brightness(1);
   -o-filter: blur(3px) brightness(1);
   -ms-filter: blur(3px) brightness(1);
   transition: all 0.3s ease-in-out;
}

它从边缘开始模糊，所以像素越多，图像的高度/宽度就越多。如果您想模糊更多并保持原始尺寸，我建议创建一个单独的 <div>包含可以应用模糊的标题。