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

Question

[Сергей Беляков]

Здравствуйте, есть задача сделать дочерний блок прозрачным, да так чтобы было видно фон прародителя, в то время как у родителя есть фон.
Вот пример как нужно сделать:

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

Answer 1

[RAX7]

Самый простой способ использовать svg маску

Comments

[Сергей Беляков]

Ух ты, нужно прочитать про svg. Спасибо!

[RAX7]

Сергей Беляков,

<svg width="100%" height="100%"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect x="10%" y="10%" width="15%" height="80%" fill="#ff0"/>
  <rect x="30%" y="5%" width="20%" height="90%" fill="#ff0"/>
  <rect x="55%" y="15%" width="20%" height="70%" fill="#ff0"/>
  <rect x="80%" y="25%" width="15%" height="70%" fill="#ff0"/>
</svg>

Хотя это можно сделать и без svg

[Сергей Беляков]

RAX7, У меня получилось без svg, но выходит много кода, с svg лучше, спасибо

Answer 2

[Сергей Беляков]

RAX7 , а как сделать так чтобы вместо картинки была просто заливка? Например желтый цвет, не разбираюсь в svg