Question

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

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

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

谢谢

Answer 1

我建议使用列表中的background-image CSS属性，而不是使用图片代码。这样，文本就会自然地流过图像。

Answer 2

您有两种选择之一： 使用锚标记包装Image标记，如下所示：

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

我更喜欢两者中的后者。

Answer 3

我会使用display: block和负上边距或position: relative和负top的组合。

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

或

li a
{
    display: block;
    position: relative;
    top: -1.1em;
}

我使用em作为单位，因为1em等于字体大小。这意味着margin-top: -1.1em将（大约）略高于一行文本的高度。

如何使用css制作图像标题

3 个答案: