如何在下一个js中设置背景以覆盖文本？答案

【问题标题】：How to set background to overlay text in next js?如何在下一个js中设置背景以覆盖文本？
【发布时间】：2021-09-09 21:39:33
【问题描述】：

我正在创建一个带有覆盖文本的图像元素。这是我的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 之外不可见。

实时查看此问题here。

如何在图像上显示叠加文本的背景以使其可读？

【问题讨论】：

感谢您的建议。但它没有用。另外，我不应该被要求添加 z-index。我只是添加到测试，看看它是否有任何区别。

标签： javascript css sass next.js jsx

【解决方案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 标签上。在容器 div 中添加 position: relative 没有任何区别。

【讨论】：