Возможно ли на css сверстать фиксированную прозрачную шапку сайта (с прокруткой на мобилке)?

Question

[Pisht]

Итак есть: шапка сайта с меню - полностью прозрачная, контент сайта и общий фон. Хотелось бы, чтобы на мобильной версии была возможность прокручивать контент, меню при этом - зафиксировано сверху. Но вот проблема при прокрутке контента, поскольку шапка полностью прозрачная, контент залезает под фиксированный блок - все смешивается и смотрится не очень. Понятно, что можно решить background(ом) на шапке, но все же хотелось бы найти решение именно с прозрачной шапкой.
Пробовал зафиксировать и контент, но тогда прокрутка образуется только у него и тоже не очень..
По сути - нужно найти решение с постоянным (при прокрутке) отступом по вертикале для контента.

Comments

[igapeka]

Может рапнуть весь контент в прозрачный див и сделать его верх вровень с низом шапки?

[Антон Литвиненко]

а какой смысл прозрачной шапки если контент не будет под нее залазить? она тогда будет выглядеть как непрозрачная.
Чудес не бывает, можно сделать полупрозрачную

Answer 1

[betterthanyouthink]

можешь попробовать накинуть backdrop-filter на шапку
e.g. backdrop-filter: blur(10px);

Это решит проблему "смешивания", но смотрите поддержку
https://caniuse.com/css-backdrop-filter

Answer 2

[MisterVerstalschyk]

Шапку надо при помощи медиа-запросов - зафиксировать с помощью свойства display: fixed. И задать шапке z-index: 20, тогда шапка будет поверх всего контента.