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

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

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;

}

请参阅fiddle！

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

透明层的文本在图像上

4 个答案: