:before 伪类不适用于图像

发布于 2024-10-27 10:09:34 字数 933 浏览 3 评论 0原文

我有以下 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中找到了这样的解释：

注意。本规范没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互。这将在未来的规范中进行更详细的定义。

更新 2：

我忘了提及 - 我需要用 CSS 可视化图像的“alt”属性。

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

原文

I have following 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.

Why?

Update:
I found this explanation in 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.

Update 2:

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. */
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦魇绽荼蘼 2024-11-03 10:09:34

考虑到您引用的规范，我想在这种情况下您必须将图像包装在一个元素中并对其应用 :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>

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.

EDIT:

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?

How about putting the information you want to display in the title attribute of the surrounding element and displaying that?

Example:

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

回复收藏 0 原文

~没有更多了~