(CSS) 如何在上放置文本（带背景色）没有绝对定位的标签

发布于 2024-11-07 00:11:58 字数 416 浏览 4 评论 0原文

正如标题所说，

我的代码是这样的：

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

容器应该有溢出：隐藏，并且我的文本将多于一行，所以我只需要一小部分文本出现在容器的底部，所以当用户悬停时，会出现全文。

我想将文本放置在 img 上而不进行绝对定位。我尝试了负边距，但文本那里没有 BG 颜色。还尝试了相对位置。 =>效果很好，但在 IE 上效果不佳。

这是我想要的图片在此处输入图像描述

原文

As the title says

my code is something like this :

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

the container should have overflow:hidden and my text would be in more than one line , so I need only a small part of my text to appear at the bottom of container, so when user hovers, the full text appears.

I want to position text over img WITHOUT absolute positioning.
I tried negative margins, but text wouldn't have BG color there.
Also tried Relative pos. => works great but not on chance on IE.

here is an image of what I want
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

新人笑 2024-11-14 00:11:58

我认为没有理由不使用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>

I see no reason not to use position: absolute.

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

回复收藏 0 原文