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>

揭示隐藏div的一部分

1 个答案: