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

Posted 2023-02-22

【中文标题】如何在下一个js中设置背景以覆盖文本？

【英文标题】：How to set background to overlay text in next js?

【发布时间】：2021-09-09 21:39:33

【问题描述】：

我正在创建一个带有覆盖文本的图像元素。这是我的jsx 代码

<div className=styles.img>
    <img src=src  />
    <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。我只是添加到测试，看看它是否有任何区别。

【参考方案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 没有任何区别。