显示隐藏的div的一部分

Question

我有2张图片。 一个将作为背景，另一个将显示放大的版本。 仅应显示放大位的一部分-与显示div相交的部分。 因此，基本上我想在下面的代码中实现的是将循环（显示）div的内容设置为红色。 如果不可能以这种方式做到这一点，那怎么可能呢？

<style type="text/css">
.base, .hidden{ 
  width:500px; height: 500px; 
  position: absolute; top: 0; left: 0; 
}
.base { background: #800; } 
.hidden { background: #080; }
.reveal { 
  width: 200px; height: 200px; border-radius: 100px; 
  border: 5px solid #000;
  position: absolute; top: 0; left: 0; 
}  
</style>
<div class="base">
  <div class="hidden"></div>
  <div class="reveal"></div>
</div>

Answer 1

我最终通过使用剪辑路径实现了我想要的：

<style type="text/css">
    .a, .b {width: 500px; height: 500px; position: absolute; top: 0; left: 0}
    .a{ background: red }
    .b{ background: green; -webkit-clip-path: circle(100px, 100px, 50px); }
</style>
<div class="a"></div>
<div class="b"></div>