Wie erstelle ich Hintergrundunschärfe in fester Kopfzeile?

Question

Ich habe feste Kopfzeile, und ich möchte dies tun:

Ich habe keine Ahnung. Hat jemand Erfahrung damit?

<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

Haben Sie 'z-index' bedeuten?

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

Ich verstehe Ihre Frage nicht

Answer 2

Die einfachste Lösung das gleiche Bild als Hintergrund auf ein Element anzuwenden ist (oder pseudo-Element wie ich hier habe) und verschwinde das. Das Pseudo-Element wird dann (absolut) so positioniert, dass es den Hintergrund des Headers selbst bildet.

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>