【问题标题】:CSS circle maskCSS 圆形遮罩
【发布时间】:2014-11-17 11:29:41
【问题描述】:

我希望在包含在主圆圈中的圆圈底部创建一个深色蒙版。

你能用 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>

谢谢

【问题讨论】:

  • 把它放在圆圈内,红色圆圈上有overflow: hidden

标签: css mask masking css-shapes


【解决方案1】:

你可以使用overflow:hidden;

DEMO

对您的 CSS 的更改:将 overflow:hidden;text-align:center 添加到 #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>

【讨论】:

    【解决方案2】:

    Updated Demo

    添加了css:

    overflow:hidden
    

    位置固定

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-07-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-10
      相关资源
      最近更新 更多