html – ：伪类之前不适用于图像_html-js-css

概述我有以下HTML： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>:before pseudo-class and images</title> <style type="text/css" media="screen"> img { display: bloc @H_502_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>

：之前不会出现图像,但它适用于任何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  title="information here"><img ... ></div>

总结

以上是内存溢出为你收集整理的html – ：伪类之前不适用于图像全部内容，希望文章能够帮你解决html – ：伪类之前不适用于图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1103843.html