图像上的透明文本层答案

【问题标题】：Transparent layer of text over an image图像上的透明文本层
【发布时间】：2013-03-07 17:05:42
【问题描述】：

我有以下标记：

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

谢谢！

【问题讨论】：

你需要这个吗：jsfiddle.net/EgLKV/357 ?

标签： html css stylesheet styling

【解决方案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>

【讨论】：

感谢您的回复。如何获得文本背景的部分透明度？

【解决方案2】：

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

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

【讨论】：

【解决方案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！

【讨论】：

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

【讨论】：