Как сделать так чтобы inline фоновая картинка была видна только в дочерних блоках?

Question

[DZHAMBUALT]

Здраствуйте! При очередной верстке возникла проблема. Есть вот такой блок:


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

Comments

[Ankhena]

Не понятно в чем проблема, почему вы не можете задать дочерним черные бордеры/тени?

[DZHAMBUALT]

Ankhena, Не совсем понял вас

[Ankhena]

DZHAMBUALT, очень старая песочница из аналогичного вопроса, разбирайтесь, переделывайте под себя.
https://jsfiddle.net/Ankhena/qcvyn5ag/

[Aetae]

Универсально только скриптом. Не универсально - масками\фильтрами\clip-path и, конечно, банальным background-position.:)

Answer 1

[Aetae]

Боль-мене универсально с помощью clip-path и трюка с позиционированием:

Answer 2

[Виталий Першин]

Как вариант маска:

Answer 3

[leeroyjenkins176]