CSS 伪在使用 img 的内容或背景之后/之前？答案

【问题标题】：CSS pseudo after/before using content or background for img?CSS 伪在使用 img 的内容或背景之后/之前？
【发布时间】：2015-04-15 03:37:39
【问题描述】：

至于伪元素:after/:before，如果我想在那里显示图像，显然有两种方法：

这两种方法都正确有效吗？为什么我应该使用一种方式而不是另一种方式？

显然使用第二种方法您无法设置图片属性，如大小。但是第一种方法通常更多地在互联网上教授。

想法？

【问题讨论】：

【解决方案1】：

这取决于你的图片是什么，就像在 CSS 中使用 <img> 标签与使用 background-image 之间的争论一样。

如果您的图片是网页内容的一部分，请使用content:url(imgurl.png);。当然，如果您希望图像具有交互性或在您的页面上告知用户体验，请使用content。如果您的图片只是用于网站视觉设计的风格，请使用background-image:url(imgurl.png);

另外，请注意您应该使用双冒号：::before 和 ::after。只有 IE8 需要单冒号版本。

【讨论】：

“如果您的图像是您页面内容的一部分，”纯粹主义者会说只使用一个 img 元素，不问任何问题。纯粹主义者还会说生成的内容纯粹是展示性的，因为它完全由 CSS 处理，并且从未成为实际内容的一部分。在这种情况下，使用 content 属性的唯一原因似乎是他们是否有兴趣使用图像的固有尺寸和/或他们不想手动调整伪元素的大小。