CSS：是否可以在 :before {content:url(..)} 元素中缩放图像？答案

【问题标题】：CSS: is it possible to scale the image in a :before {content:url(..)} element?CSS：是否可以在 :before {content:url(..)} 元素中缩放图像？
【发布时间】：2011-10-21 10:33:40
【问题描述】：

好吧，我承认我现在正在玩游戏......

我想要达到的目标：在用于在我们的 Web 应用程序中添加一些元素的实用程序链接之前应该有一个加号。
如果这个标志可以根据用户设置的字体大小进行缩放，那就太好了。

我尝试过的：

<style type="text/css">
   a.addLink:before {
      content: url('images/add.png'); height: 1.2em;    
   }
</style>

<a class="addLink" href="#" onclick="freakyJSFunction">testlink</a>

遗憾的是，高度属性被忽略了。我知道我可以在每个链接之前插入一个普通的<img../>，但这并不像我们希望的那样可维护。

或者我可以使用其中一个花哨的 unicode 字符，例如

content: "\271a";  font-size:1.4em; color:green;

现在，我将采用 unicode 的想法（刚刚在 IE8 中测试过...不，IE 8 不显示该字符（“希腊十字”）...:-( )...好的，如果我找到合适的字符显示在 IE8、FF 和 chrome 中，我会采用 unicode 的想法。

不过，我想知道我最初的想法是否可行

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

在 css3 中，您有一个 background-size 属性。

http://jsfiddle.net/jQgQv/7/

但是背景图像不能通过content: 应用，因此它不适用于您使用:before 的情况 - 只能作为普通类。

【讨论】：

非常酷，谢谢。遗憾的是我们的一些客户非常保守，所以我们会在一段时间内被IE8卡住，所以我们不能使用css3。不过，很高兴知道