(CSS)如何将位置文本(具有背景颜色)覆盖< img>标签无绝对定位 [英] (CSS) How position text (with background color) over <img> tag without absolute positioning
本文介绍了(CSS)如何将位置文本(具有背景颜色)覆盖< img>标签无绝对定位的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
标题为
的代码如下:
<div class=container> <img/> <div>some text with line one, line two , line three </div> </div>
容器应该有overflow:hidden和我的文本将在多行,只有我的文本的一小部分出现在容器的底部,所以当用户悬停时,会出现全文。
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.
我想将文本放在img上而不用绝对定位。
我尝试负边距,但文本不会有BG颜色。
也试过Relative pos。 =>
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
推荐答案
我没有理由不使用 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>
这篇关于(CSS)如何将位置文本(具有背景颜色)覆盖< img>标签无绝对定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文