Показать фоновое изображение через перекрывающиеся divs в HTML и CSS

Question

Может ли кто-нибудь сказать мне, возможен ли сценарий ниже с HTML и CSS? Моя цель - показать фоновое изображение моего тела HTML через обрезанный div.

Пожалуйста, имейте в виду, что окончательный сайт будет реагировать (подвижной первый), так что решение должно позволить различное позиционирование фоновых изображений тела при изменении размера.

В принципе: есть ли в любом случае, чтобы показать div как вырез базового div?

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

Любые идеи? Пожалуйста, дайте мне знать, нужны ли дополнительные данные. Заранее спасибо.

Answer 1

Я думаю, что это похоже:

http://ask.webatall.com/html5/7619_transparent-half-circle-cut-out-of-a-div.html

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

Этот ответ делает подобную вещь с другой формой:

http://www.samhohce.net/questions/30259780/onhover-button-cut-out-a-triangle-and-show-background