css - 如何在固定标题中创建模糊背景？

Question

我有固定的 header ，我想这样做:

我不知道。有人有这方面的经验吗？

<div class="header">
    Nejaka hlavicka s rozmazanym pozadim
</div>
<div class="body">
  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>  text a spousta dalsiho textu <br>

.header {
  background: rgba(0,0,0,.1);
  padding: 20px;
  position: fixed;
}
.body {
  font-weight: bold;
}

jsfiddle

Answer 1

最简单的解决方案是将相同的图像作为背景应用到元素(或我这里的伪元素)并对其进行模糊处理。然后伪元素(绝对)以形成标题本身背景的方式定位。

Codepen Demo

* {
  margin: 0;
  position: relative;
}
body {
  background-image: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-948.jpg);
}
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  height: 50vh;
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
}
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-948.jpg);
  filter: blur(10px);
  opacity: 1;
  z-index: -1;
}

<header>
  <h2>MY TEXT HERE</h2>
</header>