CSS mask mask

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> 

Благодаря

Answer 1

Вы можете использовать overflow:hidden;:

DEMO

изменения в вашей CSS: добавлены overflow:hidden; и text-align:center в #profile-pic

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

 
a.profile-pic-btn{ 
 
\t 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>

Answer 2

Updated Demo

Добавлено CSS:

overflow:hidden 

и положение фиксированной