javascript 如何在next js中设置背景来覆盖文本？

6psbrbz9 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(123)

我正在创建一个带有覆盖文本的图像元素。

<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之上不可见。

查看此问题的实时here。
如何在图像上显示覆盖文本的背景，以便其可读？

JavaScript

来源：https://stackoverflow.com/questions/68148856/how-to-set-background-to-overlay-text-in-next-js

2条答案

按热度按时间

k4emjkb11#

要使用z-index，需要将position设置为默认值（static）以外的值。

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>

赞(0）回复(0）举报 2023-02-02

gblwokeq2#

感谢@Devid的评论。
澄清一下，position: relative应该添加到p标签上，而将position: relative添加到容器div中没有任何区别。

赞(0）回复(0）举报 2023-02-02