html - 图像上的透明文本层

Question

我有以下标记：

<div class="photo" style="float: left; margin: 2px;">
    <a href="#">
        <img src="images/image.jpg" alt="My Image" height="240" width="240" />
    </a>
</div>

如何在图像顶部创建一个可以写一些文本的图层？该层应该具有透明度，与底部对齐并且大小为 240x60？

谢谢！

Answer 1

为什么不把图片作为背景呢？

<div class="photo" style="float:left; margin:2px">
    <a href="#" style="background:url('images/image.jpg');
          width:240px; height:240px; display:inline-block;">Your text here</a>
</div>

允许您将display:inline-block宽度和高度应用于其他内联元素，但在这里您甚至可能只想使用display:block它，因为它是容器的唯一子元素。

编辑：您甚至可以在其中放入更多容器，如下所示：

<div class="photo" style="float:left; margin:2px">
    <a href="#" style="background:url('images/image.jpg'); position:relative;
          width:240px; height:240px; display:block;">
        <span style="display:block;position:absolute;bottom:0;left:0;right:0;
              background:white;background:rgba(255,255,255,0.25);">Your text here</span>
    </a>
</div>

Answer 2

图像上的文本块。网站和demo如下：

http://css-tricks.com/text-blocks-over-image/

Answer 3

我会用这样的图像容器来做：

html

<div class="image-container">
    <img src="path/to/image" />
    <p class="caption">My text</p>
</div>

CSS

.image-container {
    position:relative;
}

.caption {
    width:100%;
    background:rgba(0,0,0,0.5);
    color:#ffffff;
    position:absolute;
    top:0;

}

看小提琴！

Answer 4

标记

<div class="figure-container">
    <img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
    <span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>

<div class="figure-container">
    <img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
    <span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>

样式表

.figure-container 
{
    position: relative;  
    display: inline-block;
}

.figure-label
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: White
}

我在这里创建了一个 JSFiddle http://jsfiddle.net/AbBKx/展示了如何相对于父容器绝对定位子元素（标签）。