html - 将图像背景放在图像的标题上

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查看第一个答案的评论以了解我在说什么。