将图像bg放到图像上的标题上

Question

我创建了一个悬停时具有图像标题的示例图像。我希望标题有一个背景图像，里面是文本，如下所示：

HTML

<div class="footerimages">
<a href="#" target="_blank"  title="Bread" ><img src="http://lorempixel.com/output/food-q-c-300-300-10.jpg" height="300px" width="300px"></a>
    </div>

CSS

.footerimages img {
    width: 30px;
    height: 30px;
}

示例Fiddle

Answer 1

您不能在title属性中包含图像，但可以使用CSS来获得相同的效果。

编辑我的立场得到纠正;您可以使用#div[title]使用CSS设置标题标记的样式。但是，浏览器仍显示默认工具提示。

让我们调用您的悬停图片#pop。在悬停您的第一张图片时，＃pop将显示在您想要的位置。

 #pop{
background:red;
width:30px;
height:30px;
display:none;
position:absolute;
top:0;
left:29px;
border:2px solid black;
}
.footerimages img:hover + #pop{
display:block;
}

DEMO

实用信息：我进行了快速搜索，找到了一种使用data属性模拟工具提示的方法。

例如，您可以使用<a href="#" data-title="Your title here"></a>并将其设置样式，如下所示：a[data-title]

See this post看看第一个答案的评论，看看我在说什么。

Answer 2

如果图片中有pointer down图片，请使用此项：

.footerimages{
    position: absolute;
    top: 100%;
}

注意：将.footerimages的父容器应用于＆＃34; static＆＃34;以外的某个位置值。