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

Question

我已修复标题，我想这样做：

我不知道。有人有经验吗？

<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的意思是'z-index'？

.header {
  background: green;
  padding: 20px;
  position: fixed;
  z-index: 10;
}
.body {
  font-weight: bold;
}

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

我不明白你的问题