通过HTML和CSS中的重叠div显示背景图像

Question

谁能告诉我,下面的场景是否可以通过HTML和CSS实现？我的目标是通过剪切的div显示我的HTML正文的背景图像.

请记住,最终的网站将是响应式的(移动优先),因此解决方案应该允许在调整大小时对身体背景图像进行不同的定位.

基本上:无论如何将div显示为底层div的剪切？

我想为每个圆圈提供单独的背景图像,以显示圆圈显示身体背景的错觉,但随着设计的响应,对齐问题将很快发生.

任何见解？如果需要更多数据,请告诉我.提前致谢.

Answer 1

我认为这很相似：

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

应该有帮助吗？您必须使用圆形来代替形状，但原理应该是相同的。另外，如果它不起作用，则将 2 个切出半圆的元素组合起来也可以达到效果。

这个答案对另一种形状做了类似的事情：

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