Как размыть шапку?

Question

[romanchs]

Есть шапка фиксированная и при пролистывании надо размыть все что под ней, аля ios уже день и ночь сижу и через css ничего не получается +гуглил и ничего по этому тоже не нашел

Comments

[Андрей Токмаков]

Что в Вашем понятии размыть?

Answer 1

[Сергей Горячев]

На чистом CSS пока никак.
Во всяком случае, в массовой верстке нельзя использовать backdrop.
Ибо работать оно будет только на Сафари.

.header {
    background-color: rgba(255,255,255,.6);
    backdrop-filter: blur(5px)
}

https://habrahabr.ru/post/264037/


С использованием jQuery варианты есть.
www.jqueryrain.com/demo/jquery-blur

Например вот https://habrahabr.ru/post/140594/
В принципе, неплохой скрипт.

Answer 2

[Vlad Feninets]

можно заюзать filter: blur(5px)
у него неплохая поддержка - https://caniuse.com/#feat=css-filters
отвалится только в IE

как-то так можно сделать

.header {
	....
}

.header::before, .header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header::before {
	background: rgba(255, 255, 255, 0.6);
	z-index: 2;
}

.header::after {
	filter: blur(5px);
        -webkit-filter: blur(5px);
	z-index: 3;
}

Comments

[Сергей Горячев]

Нифига не выйдет.

[Vlad Feninets]

Sergey Goryachev: угу( видимо вы правы, попробовал только что на codepen - контент лейером ниже не блюрится

[Vlad Feninets]

как вариант - можно поиграть с blend-модами.
но у них поддержка пока не оч
caniuse.com/#feat=css-backgroundblendmode