Прозрачный слой сквозь другой прозрачный слой на CSS?

Question

[AfterGen]

Привет.
Есть некоторая надпись на неоднородном фоне - codepen
Есть ли возможность на чистом CSS, сохраняя именно такую разметку, добиться результата как на рисунке:
До

После


Т.е. каким-то образом сделать прозрачный фон самого списка сквозь прозрачный фон блока <div class="material">

Сам блок <div class="material"> фиксированный. Ширина списка <ul> зависит от кол-ва надписей и их ширины, в связи с этим длина боковых линий должна меняться.

Answer 1

[Сергей]

через before и after сделать полоски

Comments

[AfterGen]

Идея неплохая, но еще интересует сама возможность сделать верхние слои прозрачными, чтобы видеть сквозь них самый нижний

[AfterGen]

при этом прозрачность самого верхнего слоя как бы перекрывает содержимое промежуточного слоя

[Дмитрий]

а такой вариант подойдет - https://codepen.io/anon/pen/dOwjVO?

[AfterGen]

Дмитрий: Да, очень хорошее решение, спасибо

Answer 2

[Максим]

что бы через монитор кресло было видно !?

Comments

[AfterGen]

Чтобы через монитор и через кресло было видно, что за ними

[Максим]

AfterGen: вот вот ! броузер всё равно белый , так что на фоне изображения ваша прозрачность будет видна а на белом фоне ... без разницы , всё равно будет белое

[AfterGen]

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

[AfterGen]

так чтобы остались видны именно боковые части полоски

Answer 3

[GreatBOND]

Если я правильно понял что вы хотите сделать, то можно сам блок с пунктами меню обвести тегом span и ему задать отступы справа/слева и такой же фон как и у второго плана...