CSS3伪元素上的视网膜图像

Question

我一直成功地使用Smashing Magazine描述的视网膜图像技术，使用背景大小和媒体查询。

然而，我刚刚发现了一个这种技术似乎不起作用的例子：样式化CSS3伪元素。

<p>test</p>
p:before {
  content: url('http://file.rspreprod.fr/BNP/Maps/img/web/[e-mail]');
  background-size: 15px 25px;
  width:15px;
  height:25px;
}

检查此JS Fiddle：http://jsfiddle.net/t29xzxmw/2/

在iPhone和Android上，图像并不像应该的那样清晰。你知道将视网膜图像应用于CSS3伪元素的解决方案吗？

Answer 1

使用background而不是content:""

p:before {
  content:"";
  background:url('http://file.rspreprod.fr/BNP/Maps/img/web/[e-mail]');
  background-size: 15px 25px;
  width:15px;
  height:25px;
}