Маска переполнения текста переполнения округлого изображения - PullRequest
Новая
       9

Маска переполнения текста переполнения округлого изображения

0 голосов
/ 30 апреля 2018

Я пытаюсь замаскировать любое переполнение текстовых ссылок поверх округленного изображения. У меня есть рабочий поршень здесь

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

Как мне замаскировать текст, который выходит за округленные границы изображения?

1 Ответ

0 голосов
/ 30 апреля 2018

Использование clip-path : 

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