Отрисовка полукруга

@Utacoma · Регистрация: 09.12.2015

Author24 — интернет-сервис помощи студентам

День добрый!
Хочу перенести текст над картинкой на саму картинку, делаю так:

CSS

.pic {
    display:inline-block;   
    position:relative;
 
}
.pic span {
    display:inline-block;
    position:absolute;
    bottom:5px;   
    left:0px;
    width:90px;
     
    color:#FFF;
    font-family:Monotype Corsiva;
    font-size:20px; 
 
    background-color:rgba(0,0,0,.6);
    padding:10px 30px;
}

HTML5

    <div class='pic'>
    <img class='round' src='$foto' alt='$name' height='150' width='150'>
    <span>$name</span>
    </div>

Фото закруглённое, поэтому выглядит это так как во вложении.

Каким образом мне подогнать форму тёмной области под круг?

@mrtoxas · 10.03.2017, 16:29

Задавайте размеры не изображению, а блоку .pic. Изображению ставьте ширину 100%, а блоку .pic задайте стиль overflow: hidden;

@Utacoma · 10.03.2017, 17:25 **[ТС]**

Спасибо за развёрнутый ответ!

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.03.2017, 16:29	2
	Задавайте размеры не изображению, а блоку `.pic`. Изображению ставьте ширину 100%, а блоку `.pic` задайте стиль `overflow: hidden;` 1

@Utacoma 1 / 1 / 1 Регистрация: 09.12.2015 Сообщений: 70
	10.03.2017, 17:25 [ТС]	3
	Спасибо за развёрнутый ответ! 0