文章/答案/技术大牛

发布

社区首页 >问答首页 >圆图像的掩码溢出文本溢出

问圆图像的掩码溢出文本溢出
EN

Stack Overflow用户

提问于 2018-04-29 22:36:02

回答 1查看 56关注 0票数 2

我试图掩盖任何溢出的文本链接顶部的圆角图像。我有一个工作的柱塞这里

HTML：

<body>
  <div class="container">
    <img class="profile-picture" src="https://image.freepik.com/free-icon/male-user-profile-picture_318-37825.jpg">
    <a class="profile-picture-link">Mask the overflow of this text</a>
  </div>
</body>

CSS：

.profile-picture{
    height: 250px;
    width:250px;
    border-radius:50%;
    margin:auto;    
}

.container{
    background:pink;
    margin: auto;
    width:50%;
    text-align:center;
}

.profile-picture-link{
    background: rgba(255,255,255, .6);
    position:relative;
    top:-30px;
}

如何掩蔽溢出图像圆角边框的文本？

css

html

user-interface

user-experience

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-29 22:46:39

使用夹径

.profile-picture {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  margin: auto;
}

.container {
  background: pink;
  margin: auto;
  width: 50%;
  text-align: center;
  -webkit-clip-path: circle(43% at 44% 46%);
clip-path: circle(43% at 44% 46%);
}

.profile-picture-link {
  background: rgba(255, 255, 255, .6);
  position: relative;
  top: -30px;
}

<div class="container">
  <img class="profile-picture" src="https://image.freepik.com/free-icon/male-user-profile-picture_318-37825.jpg">
  <a class="profile-picture-link">Mask the overflow of this text</a>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50091946

复制

相似问题

问圆图像的掩码溢出文本溢出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆图像的掩码溢出文本溢出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问圆图像的掩码溢出文本溢出
EN