Как создать размытие фона в фиксированном заголовке?

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

ли вы имеете в виду 'Z-индекс'?

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

Я не понимаю ваш вопрос

Answer 2

Самое простое решение применить тот же изображение в качестве фона для элемента (или псевдо-элемент, как я здесь) и размыть это. Затем псевдоэлемент позиционируется (абсолютно) таким образом, что он формирует фон самого заголовка.

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>