如何在图片中显示文本背景颜色

Question

我想在图片中显示文字的背景颜色而不改变位置。我该怎么做？

<div id="pic" ><img src="c.jpg" width="200" height="200"></div>
<p id="text"> ABC</p>

<style>
    #text {
        background-color:#ff0000;
        margin-top: -50px;
        position: static;

    }
</style>

Answer 1

这实际上是一个排序问题，图片高于背景颜色，文字在图片上方。

有关完成此操作的方法，请参阅此答案： (CSS) How position text (with background color) over <img> tag without absolute positioning

Answer 2

将position: static更改为position: relative

Answer 3

使用position: relative;代替position: static;

Answer 4

只需从静态更改为相对。

<style>
    #text {
        background-color:#ff0000;
        margin-top: -50px;
        position: relative;
    }
</style>

如果你想要倍加肯定，z-index: 1;