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

【问题标题】：how to display text background-color in the picture如何在图片中显示文本背景颜色
【发布时间】：2014-09-30 00:54:06
【问题描述】：

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

<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>

【问题讨论】：

不改变位置。

标签： html css

【解决方案1】：

这其实是一个排序问题，图片在背景色之上，文字在图片之上。

请参阅此答案以了解实现方式： (CSS) How position text (with background color) over <img> tag without absolute positioning

【讨论】：

【解决方案2】：

将position: static 更改为position: relative

【讨论】：

【解决方案3】：

使用position: relative; 而不是position: static;

【讨论】：

【解决方案4】：

只需从静态更改为相对即可。

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

如果你想更加确定，z-index: 1;

【讨论】：

我知道如果我改变位置它会起作用，但它会搞砸一切。它必须是静态的。我尝试了 z-index，但它不适用于 position: static。
我能问一下它是怎么搞砸的吗？我们可能会找到一种解决方法，允许您根据具体情况使用position: relative。目前取决于静态的是什么？
如果您可以更改 img 的位置和 z-index，那么这可能对您有用。 img{ position: relative; z-index: -1; }
这很复杂，如果我使用其他位置，图片之间会有我不想要的间隙，因为我设计了文字在悬停时淡出，图片会在悬停时移动文本淡出淡入。它必须根据浏览器大小进行调整，问题一直存在。相对可以，但图片之间会有差距。
我发现了问题。您的 li:after 需要样式 content: ''; 如果您希望标签与框的垂直中心对齐，请将它们的边距更改为 0 5px 并在 li 上添加边距以展开线条。