Question

我正在尝试制作一个图像裁剪弹出窗口，其中包装器中有一个球体。我的目标是使图像对包装器内的球体除外。

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

任何帮助将不胜感激。

Answer 1

检查以下是您的预期输出。

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

第二个解决方案：

使用div你可以这样做。

* {
    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

编辑2：

如果你不想要背景，那么把图片放在里面。

<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/

如何使图像在圆周上透明

2 个答案: