在使用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 需要单冒号版本。