如何使图像围绕圆圈透明

Question

I am trying to make a image cropping popup where the wrapper has a sphere in it. My target is to make the image transparent to the wrapper except the sphere inside the wrapper.

HTML

<div class="wrapper">
  <figure>
    <img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg"/>
  </figure>
</div>

CSS

.wrapper{
  height: 300px;

  background-color: red;
  position: relative;
}
figure{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0;
  background-color: #fff;
  margin: 0 auto;
}

figure img{
  opacity: 0.5;
  position: absolute;
  left: 0;
  max-height: 100%;
}

Demo

Any help would be appreciated.

Answer 1

Check following which is your expected output.

 img { mask: url(#masking); } 

 <svg> <defs> <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"> <stop stop-color="black" offset="0"/> <stop stop-color="white" offset="1"/> </linearGradient> <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> <circle cx=".5" cy=".5" r=".35" fill="white" /> </mask> </defs> </svg> <img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg" width="568"> 

Reference link

Second Solution:

Using div you can do like following way.

 * { margin: 0; padding:0; } div{ position:relative; width:450px; height:300px; overflow:hidden; left:0; } div:after{ content:''; position:absolute; left:155px; top:25px; border-radius:50%; width:150px; height:150px; box-shadow: 0px 0px 0px 1000px rgba(255,255,255,0.5); } body{background: url('https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg');background-size:450px; background-repeat: no-repeat;} 

 <div></div> 

Fiddle link

Edit 2:

If you don't want background then put image inside give.

<div>
<img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg" width="450px" />
</div>

New Fiddle

Answer 2

您可以尝试掩盖它，在这里看看： https : //webkit.org/blog/181/css-masks/