Question

我试图屏蔽圆形图像顶部的任何文本链接溢出。我有一个工作的plunker here

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;
}

如何屏蔽溢出图像圆角边框的文字？

Answer 1

使用clip-path：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

掩码溢出文本溢出的圆形图像

1 个答案: