CSS圆形遮罩

Question

我希望您能在主圆中创建一个底部暗色遮罩的圆形，您可以使用CSS遮罩实现吗？请参见fiddle。

<div id="profile-pic-wrap">
  <div id="profile-pic">
    <div class="profile-btn-bg">
      <a href="#" class="profile-pic-btn">Change Profile</a>
    </div>
  </div>
</div>

谢谢

- user2965875

---

将其放在红色圆圈中，并对该圆圈使用 overflow: hidden 属性？ - Andy Holmes

Answer 1

您可以使用overflow: hidden;:

演示

changes to your CSS : added overflow:hidden; and text-align:center to #profile-pic

#profile-pic {
 position: absolute;
 z-index: 999;
 width: 200px;
 height: 200px;
 left: 33px;
 background: #FFF;
 border: 3px solid #FFF;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 top: 0px;
 position: relative;
    background:red;
    overflow:hidden;
    text-align:center;
}
.profile-btn-bg{
 position: absolute;
 background-color: black;
 width: 100%;
 height: 30%;
 bottom: 0px;
}

a.profile-pic-btn{
 color: #fff;
    
}

<div id="profile-pic-wrap">
  <div id="profile-pic">
    <div class="profile-btn-bg">
      <a href="#" class="profile-pic-btn">Change Profile</a>
    </div>
  </div>
</div>

- web-tiki

Answer 2

更新演示

添加了css：

overflow:hidden

固定定位

- Manwal