gpt4 book ai didi

html - :before pseudo-class doesn't work with images

转载 作者:太空狗 更新时间:2023-10-29 14:18:32 24 4
gpt4 key购买 nike

我有以下 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 不会出现在图像上,但它会出现在任何 div 上。

为什么?


更新:我在 W3C 中找到了这个解释:

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:

我忘记说了——我需要用 CSS 可视化图像的“alt”属性。

img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}

最佳答案

考虑到您引用的规范,我想这是您必须将图像包装在一个元素中并在其上应用 :before 的情况。


编辑:

考虑到,alt 属性用于替代文本并且基本上应该提供与图像相同的信息,这是否意味着您正在为用户复制信息?

如何将要显示的信息放在周围元素的 title 属性中并显示它?

例子:

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

关于html - :before pseudo-class doesn't work with images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5457825/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com