我尝试创建一个由属性值生成的仅css的IMG-Tooltip。我尝试了以下代码
<img src="blabla.jpg" data-caption="this is my caption" />
和CSS-Code:
img {
position: relative;
}
img:after {
content: attr(data-caption);
position: absolute;
bottom: 2em;
left: 2em;
z-index: 2
}
这种方法对于div容器是没有问题的。但我怎么才能让它在图像上工作呢?
谢谢你,托马斯。
使用CSS创建工具提示有多种方法，但这里有一个为image创建工具提示的小示例。
在下面的例子中，我使用了html的title属性，其工作原理也类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" title="imgae">
</body>
</html>你会在这里找到更多有用的答案:答案
如果你觉得这段代码有帮助，请告诉我.