html – :伪类之前不适用于图像

前端之家收集整理的这篇文章主要介绍了html – :伪类之前不适用于图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下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>

:之前不会出现图像,但它适用于任何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. */
}

解决方法

考虑到你引用的规范,我想这是你必须将图像包装在一个元素中并应用:之前的情况.

编辑:

考虑到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相关文章