（CSS）如何在 <img> 标签上定位文本（带背景颜色）而不使用绝对定位

Posted 2023-03-06

【中文标题】（CSS）如何在 <img> 标签上定位文本（带背景颜色）而不使用绝对定位

【英文标题】：(CSS) How position text (with background color) over <img> tag without absolute positioning

【发布时间】：2011-08-25 07:34:15

【问题描述】：

正如标题所说

我的代码是这样的：

<div class=container> <img/> <div>some text with line one, line two , line three </div> </div>

容器应该有 overflow:hidden 并且我的文本会超过一行，所以我只需要我的一小部分文本出现在容器的底部，所以当用户悬停时，会出现全文。

我想在没有绝对定位的情况下将文本定位在 img 上。 我尝试了负边距，但那里的文本不会有 BG 颜色。 还尝试了相对位置。 => 在 IE 上效果很好，但不是偶然的。

这是我想要的图片

【问题讨论】：

我们也给你带来一只独角兽吗？

我认为position: absolute; 是获得这个的唯一方法。你有不想使用它的理由吗？

@Ender : 请给两个 :) @David-Thomas : IE6 中的每件事都变得疯狂，当它绝对化时，我没有足够的专家来处理它（你有什么建议吗？那个问题？？）

老兄，看在上帝的份上，请不要支持ie6。除非它是为了您的业务或您真的不应该使用它。

@Bialy: Are you sure you care about IE6? 你有充分的理由支持它吗？

【参考方案1】：

我认为没有理由不使用position: absolute。

见：http://jsfiddle.net/NeaR4/

CSS：

.container 
    border: 2px dashed #444;
    float: left;
    position: relative

.container img 
    display: block

.container > div 
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 14px;
    background: #000;
    background: rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
    font: bold 14px Arial, sans-serif;
    padding: 5px;

.container:hover > div 
    height: auto

HTML：

<div class="container">
    <img src="http://dummyimage.com/230x180/f0f/fff" />
    <div>some text with line oneeee, line twoooooooo ooooooo , line three</div>
</div>

【讨论】：

我已经使用绝对定位并且正在寻找更好的东西，无论如何感谢您的时间:)

我会看看如何让它在 IE6 中运行。你可以使用（次要）javascript 吗？

（在我注意到你接受了我在 IE6 中不起作用的答案之后） 我应该考虑在 IE6 中实现这项工作吗？

如果您有时间，我想看看针对该浏览器的任何 js 解决方案 :(

@Bialy：这是一个主要适用于 IE6 的版本，必要时使用 jQuery：http://fiddle.jshell.net/euawG/show/light/ / http://jsfiddle.net/euawG/ - 请注意，我使用 .load() 运行代码（而不是.ready())。

【参考方案2】：

position:relative 解决你的问题

【讨论】：

亲戚为我做了。困扰我一段时间了。有点奇怪的解决方案是缺乏相对。谢谢。