Php 如何使用css制作图像标题线

大家好 我创建了一个幻灯片（带有左箭头和右箭头），以三组显示图像，图像水平对齐，每个图像都包含在一个带有链接（标题）的li元素中，如下所示：

 <li><image src="image_n.jpg"></image><a href="www.google.com">Google search engine</a></li>

好的，我的问题是，如何使用css放置标题线（“a”标记），使其覆盖图像的底部

---

谢谢

我建议使用列表上的

背景图像

CSS属性，而不是使用图像标签。这样，文本将自然地在图像上流动。

我建议使用列表上的

背景图像
CSS属性，而不是使用图像标记。这样，文本将自然地在图像上流动。
您有两个选项之一：
用锚定标记包装图像标记，如下所示：

<li><a href="www.google.com"><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></a></li>



删除图像标签并在背景中定义图像：

<li><image src=""></image><a href="www.google.com" style="display:block; height:Xpx; width:Ypx; background:url(image_n.jpg);">Google search engine</a></li>



我更喜欢两者中的后者。
您有两种选择之一：
用锚定标记包装图像标记，如下所示：

<li><a href="www.google.com"><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></a></li>



删除图像标签并在背景中定义图像：

<li><image src=""></image><a href="www.google.com" style="display:block; height:Xpx; width:Ypx; background:url(image_n.jpg);">Google search engine</a></li>



我更喜欢两者中的后一种。
我会结合使用
显示：块
和负上边距或
位置：相对
和负上

li a /* or a unique identifier if it's just this instance */
{
    display: block;
    margin-top: -1.1 em;
}

或

我使用
em
作为一个单位，因为1em等于字体大小。这意味着
页边距顶部：-1.1m
将（大约）比一行文本的高度略高。
我将使用
显示：块
和负上页边距或
位置：相对
以及负上页边距的组合

li a /* or a unique identifier if it's just this instance */
{
    display: block;
    margin-top: -1.1 em;
}

或

我使用
em
作为一个单位，因为1em等于字体大小。这意味着
页边距顶部：-1.1m
将（大约）比一行文字的高度略高。
谢谢，但我不知道是否接受，但我为之工作的客户除外。：）如果你这样做，客户永远不会知道。如果他大发雷霆，只要告诉他更多的标准和508兼容。在这一点上，他们通常会摇头走开。@OldCode，我为一些客户工作，他们不摇头而不抛出箭头之类的问题…：）@西莫·塔奇：那么，我的朋友，是时候开始制作这种银色舌头了。谢谢你，但我不知道它是否会被接受，但我为之工作的客户除外。：）如果你这样做，客户永远不会知道。如果他大发雷霆，只要告诉他更多的标准和508兼容。在这一点上，他们通常会摇头走开。@OldCode，我为一些客户工作，他们不摇头而不抛出箭头之类的问题…：）@Simo TAQI：那么，是时候用银色的舌头了，我的朋友。谢谢你，我会尝试这两种：-）@OldCode，我已经尝试了所有的方法，但是都没有用……无论如何，谢谢你。谢谢你，我会尝试这两种：-）@OldCode，我已经尝试了所有的方法，但是没有用……无论如何，谢谢你。但是我的li元素都是内联的，所以如果我添加它们，它们会出现在一行中（display:block）对于LIA元素，它会将所有li元素都显示为display:block；啊。它们是否可以更改为
float:left
而不是
display:inline
？但是我的li元素都是内联的，因此如果我添加（display:block），它们会显示在一行中对于LIA元素，它会将所有li元素显示为：block；啊。它们是否可以更改为
float:left
，而不是
display:inline
？