Как правильно сверстать внутренние блоки секции поверх блока с фильтром ??

Question

[BB 8]

Как правильно сверстать шапку поверх блока с фильтром, чтобы фильтр не накладывался на другие блоки сецкии ??

Answer 1

[Иван]

ммм...рассылка от хтмлакадемии)

Лично я просто картинку сразу такую сделал и поставил.

Comments

[Иван]

Либо обертку дивом делайте,и фон уже обертке даете

[BB 8]

Да, та самая рассылка)

Я задал секции картинку, а внутри нее поместил div.opacity с background-color и opacity, но этот вариант покрывает соседние элементы фильтром :\

[BB 8]

НАверное, лучше всего сохранить готовую картинку с фильтром

[Иван]

BB 8: ну я думаю ,что в реальной работе так извращаться не придется)

Answer 2

[Борис Шпаковский]

Как вариант сделать оверлей с полупрозрачным градиентом псевдоэлементом, вместо фильтра. Типа как тут:
https://codepen.io/alexcarpenter/pen/LveDx

Comments

[Борис Шпаковский]

Да, еще можно сделать виньетку через box-shadow inset

[BB 8]

Можно, но Ваш вариант не решает моей проблемы: "Как правильно сверстать шапку поверх блока с фильтром, чтобы фильтр не накладывался на другие блоки сецкии ??"

Если в Вашем варианте задать дочерние элементы, то они будут внутри блока с opacity: .6. А мне нужно избежать наложения opacity на дочерние элементы . Прям как на примере) Можно извратиться с абсолютным позиционированием, но я хотел бы найти более простое решение)

[Борис Шпаковский]

BB 8: если принципиально надо сделать так, то необходимо вынести блок за пределы секции и задать ему абсолютное позиционирование, тогда фильтр секции не будет применяться к блоку: https://jsfiddle.net/kotboris/Lxobk0ss/1/