Блог

Главная - Вопросы по программированию - Как установить фон для наложения текста в следующем js?

Как установить фон для наложения текста в следующем js?

#javascript #css #sass #next.js #jsx

Вопрос:

Я создаю элемент изображения с наложенным текстом. Вот мой jsx код

 <div className={styles.img}>
    <img src={src} alt="" />
    <p>{`(${size})`}</p>        
</div>

и вот sass 

 .img {
    min-width: 180px;
    text-align: center;
    cursor: pointer;
    img {
        height: 90px;
        box-shadow: orangered 0 0 5px;
    }
    p {
        color: white;
        font-weight: bold;
        margin: auto;
        font-size: .8rem;
        margin-top: - 1.6rem;
        // max-width: 120px;
        // z-index: 100;
        background-color: #0070f3;
    }
}

Я получаю результат, как показано на следующем рисунке. Фон p тега виден только снаружи img , а не поверх img .

введите описание изображения здесь

Проверьте этот вопрос в прямом эфире здесь.

Как отобразить фон для наложения текста на изображение, чтобы оно было читаемым?

Комментарии:

1. Спасибо за предложение. Но это не сработало. Кроме того, мне не нужно будет добавлять z-индекс. Я просто добавил, чтобы проверить, имеет ли это какое-либо значение.

Ответ №1:

Для использования вам нужно установить значение, position отличное от значения по умолчанию (статическое) z-index . Вот пример с position: relative .

 p
{
background: #0cf;
margin-top: -1.6rem;
z-index: 100;
}

p.positioned
{
position: relative;
} 
 <img src="http://via.placeholder.com/100x80"/>
<p>Test without positioning</p>

<img src="http://via.placeholder.com/100x80"/>
<p class="positioned">Test with positioning</p>

Ответ №2:

Спасибо за комментарий @Devid.

Просто для уточнения, position: relative это должно быть добавлено в p тег. Добавление position: relative в контейнер div не имеет никакого значения.

Метки: