CSS：在:before {content:url(..)}元素中，是否有可能对图像进行缩放？

Question

CSS：在:before {content:url(..)}元素中，是否有可能对图像进行缩放？

csspseudo-element

3

好的，我承认现在我正在玩耍...

我的目标：

网页应用程序中使用的实用链接前应有一个加号，以添加一些元素。最好是此符号根据用户设置的字体大小进行缩放。

我尝试过的方法：

<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的想法。

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

- cypherabe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- easwee · Accepted Answer

在 CSS3 中，你有一个 background-size 属性。

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

然而，背景图像不能通过 content: 应用，因此在使用 :before 时它不起作用 - 只能作为普通类使用。