裁剪HTML元素

Question

这就是它现在的样子，我想要移除掉掉图像的蓝色条带。 我有一个用img标签创建的圆形图像。我想在圆圈的下半部分的图像上放一个小横幅。我无法从图像中裁剪出溢出的span元素。

＆＃13;

＆＃13;

.image {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 2px solid #527e35;
  box-shadow: 2px 2px 5px #c8e1b7;
}
.flap {
  position: absolute;
  top: 170px;
  width: 150px;
  margin-left: 0PX;
  padding-left: 20px;
  background: rgba(0, 0, 255, .4);
}

＆＃13;

    <div name="image" style="float:right; padding-right:50px;margin-bottom:100px;">
      <span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">
<span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">
<span class="flap">keyword </span>
      <img src="content/baby.jpg" alt="baby" class="image">    
    </div>

＆＃13;

＆＃13;

＆＃13;

有了这个，我已经用一个带有一些文字的细条实现了圆形图像。我想删除溢出的条带。 任何帮助或指导都非常感谢。

Answer 1

这是因为你没有在包装器上使用overflow:hidden，其次是因为你使用的是name="image"而不是class="image"。

此外，包装器需要position:relative。

.image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #527e35;
  box-shadow: 2px 2px 5px #c8e1b7;
  overflow: hidden;
  position: relative;
}

.flap {
  position: absolute;
  top: 170px;
  left: 0;
  z-index: 1;
  width: 200px;
  text-align: center;
  background: rgba(0, 0, 255, .8);
  color:white
}

img {
  display: block;
}

<div class="image">
  <span class="flap">Our Man Phil</span>
  <img src="http://www.fillmurray.com/200/200" alt="baby" class="image">
</div>