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

Question

请问以下场景是否可以通过HTML和CSS实现？我的目标是通过剪切的div显示HTML body的background-image。

请注意，最终的网站应该是响应式（移动优先），因此解决方案应该允许在调整大小时对不同位置的body背景图像进行定位。

基本上，有没有办法将一个div显示为底层div的剪切部分？

我考虑了为每个圆形提供单独的背景图像，以显示圆形显示body背景的错觉，但由于设计是响应式的，所以很快就会出现排列问题。

有什么建议吗？如果需要更多数据，请告诉我。谢谢！

- chocolata

---

一种实现这个的方法是将相同的背景图像放置到圆形div中，并使用background-position和媒体查询进行调整。 - Vucko

我跟 @Vucko 的想法是一样的，在HTML层中，如果有一些神奇的剪辑方式的话会很棒。但这似乎与HTML层的本质相违背。 - chocolata

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

- mmoment

---

谢谢你的回答。这似乎相当简单，可以使用CSS-shapes。唯一不清楚的是：我该如何填充标题下方的屏幕其余部分？ - chocolata

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - mmoment

抱歉，请问如何将屏幕头部以下的其余部分填充为白色，以创造圆形被剪裁的假象？ - chocolata

如果你把这个 http://i.stack.imgur.com/EkDr6.png 看作是一个矩形内的半圆，那么做法就很简单了：创建一个带有上方半圆的矩形，再创建一个带有下方半圆的矩形，然后将带有下方半圆的矩形放在带有上方半圆的矩形上面即可。 - mmoment

创建形状对我来说很清楚。唯一的问题是在标题下方用白色填充100%的视口宽度。 - chocolata