CSS：是否可以在 :before {content:url(..)} 元素中缩放图像？
好吧，我承认我现在处于玩耍的状态......
我想要实现的目标： 在用于在我们的 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>
遗憾的是，高度属性被忽略了。 我知道我可以在每个链接之前插入一个普通的
或者我可以使用一种奇特的 unicode 字符，例如
content: "\271a"; font-size:1.4em; color:green;
现在，我将采用 unicode 想法（刚刚在 IE8 中测试了这一点...不，IE 8 不显示该字符（“希腊十字”）。 ..:-( )...好吧，如果我找到一个合适的字符可以在 IE8、FF 甚至 chrome 中显示，我会采用 unicode 的想法。
不过，我想知道我最初的想法是否可行
ok, I admit I'm in the realm of playing around now...
What I want to achieve:
there should be a plus sign before utility links that are used to add some elements in our web application.
It would be good if this sign scales according to the font size the user has set.
What I've tried:
<style type="text/css">
a.addLink:before {
content: url('images/add.png'); height: 1.2em;
}
</style>
<a class="addLink" href="#" onclick="freakyJSFunction">testlink</a>
sadly, the height attribute is ignored.
I know i could just insert a normal <img../> before every link, but that's not as maintainable as we want it to be.
Or I can use one of the fancy unicode characters, for example
content: "\271a"; font-size:1.4em; color:green;
for now, I'll go with the unicode idea (just tested this in IE8...nope, IE 8 doesn't display that character ("greek cross")...:-( )...ok, I will go with the unicode idea if I find a suitable charakter that is displayed in IE8, FF and maybe chrome..
still, I wonder if my initial idea is somehow doable
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 css3 中，您有一个
background-size属性。http://jsfiddle.net/jQgQv/7/
但是背景图像无法应用
content:因此它在您使用:before的情况下不起作用 - 仅作为普通类。In css3 you have a
background-sizeproperty.http://jsfiddle.net/jQgQv/7/
However background-image can't be applied trough
content:so it won't work in your case using:before- only as a normal class.