图像上的透明文本层

为什么不把图像作为背景呢?

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

图像上的文本块。网站和演示如下:

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

我会像这样使用一个图像容器:

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;

}

看见 fiddle !

加成

<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/ 示出了如何相对于父容器绝对定位子元素(标签)。