:before伪类不适用于图像 [英] :before pseudo-class doesn't work with images
问题描述
我有以下HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:before pseudo-class and images</title>
<style type="text/css" media="screen">
img {
display: block;
width: 640pt;
}
img:before {
content: "Test";
}
</style>
</head>
<body>
<img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" />
</body>
</html>
:之前不会出现在图像上，但是会出现在任何格上.
:before will not appear for image, but it does for any div.
为什么?
更新: 我在W3C中找到了这种解释:
Update: I found this explanation in W3C:
注意.该规范没有完全定义:before和:after与替换元素(例如HTML中的IMG)的交互.在以后的规范中将对此进行详细定义.
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
更新2:
Update 2:
我忘了提-我需要使用CSS可视化图像的"alt"属性.
I forget to mention - i need to visualize "alt" attribute of image with CSS.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
推荐答案
考虑到您引用的规范，我想这是您必须将图像包装在元素中并在其上应用:before的情况.
Considering the specification you quoted, I guess this is a case where you have to wrap the image in an element and apply :before on that.
考虑到alt属性用于替代文本，并且基本上应该提供与图像相同的信息，这是否意味着您正在为用户复制信息?
Considering, that the alt attribute is for alternative text and basically should confer the same information as the image does, wouldn't that mean you are duplicating the information for the user?
如何将要显示的信息放在周围元素的title属性中并显示呢?
How about putting the information you want to display in the title attribute of the surrounding element and displaying that?
示例:
<style type="text/css" media="screen">
.image:before {
content: attr(title);
}
.image img {
display: block;
width: 640pt;
}
</style>
<div class="image" title="Information here"><img ... ></div>
这篇关于:before伪类不适用于图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
