给出一个透明的PNG,用白色显示一个简单的形状,是否有可能通过CSS改变这个颜色?某种覆盖或什么的?
你可能想看一下Icon字体。http://css-tricks.com/examples/IconFont/
编辑:我在我最新的项目中使用Font-Awesome。你甚至可以引导它。只需把这个放在你的<head>
中。
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
然后继续添加一些图标链接,像这样。
<a class="icon-thumbs-up"></a>
这里是完整的小抄。
--编辑--
Font-Awesome在新版本中使用了不同的类名,可能是因为这使得CSS文件大大缩小,同时也是为了避免模糊的CSS类。 所以现在你应该使用。
<a class="fa fa-thumbs-up"></a>
EDIT 2:
刚刚发现github也使用自己的图标字体。Octicons 它可以免费下载。他们也有一些关于如何创建你自己的图标字体的提示。
是的 :)
Surfin' Safari - Blog Archive » CSS Masks
WebKit现在支持CSS中的alpha掩码。遮罩允许你在一个盒子的内容上覆盖一个图案,这个图案可以用来在最终的显示中打掉该盒子的部分内容。换句话说,你可以根据图像的阿尔法来剪辑复杂的形状。
[...] 我们已经引入了新的属性,为网页设计者提供了对这些遮罩以及如何应用它们的大量控制。这些新的属性类似于已经存在的背景和边界图像属性。
-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-ask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)