Маскирование фонов CSS

Общее
1

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el дырка и через него просвечивает нижний фон. Я пробовал через clip-path но оно обрезает наружное, а мне надо то что внутри что б вырезало.
https://jsfiddle.net/BlackStar1991/9xjmdwva/1/

ПС Нижний фон может быть любым, не только красный, но и картинка или что то сложное.

2

а вы не хотите добавить 5 дивов с бордер-радиус 50% (то бишь, круглых) с нужным вам фоном и расположить их над слоем с черным фоном?

3

Самый простой способ - это создать “перекрывающий фон” с помощью svg, то есть не круг, как вы делали, а всю фигуру целиком.

2 лайка