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

Question

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

1. 使用background-image:url(imgurl.png);
2. 使用content:url(imgurl.png);

两种方式都是正确有效的吗？我为什么要单独使用另一种方式？

显然使用第二种方法无法像尺寸那样设置图片属性。但是第一种方法通常在互联网上教授。

想法？

Answer 1

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

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

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