给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG,并将特定的颜色更改为透明(如裁剪),并使用CSS更改背景颜色。
其他回答
如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG,并将特定的颜色更改为透明(如裁剪),并使用CSS更改背景颜色。
你可能想看看图标字体。http://css-tricks.com/examples/IconFont/
编辑:我在我的最新项目中使用字体- 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>
编辑2:
刚刚发现github也使用自己的图标字体:Octicons 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。
使用这个很棒的codedeen示例,您插入十六进制颜色值,它返回所需的过滤器,将此颜色应用到png
CSS过滤器生成器转换从黑色到目标十六进制颜色
例如,我需要我的png颜色为#EF8C57
然后你必须对你的PNG应用下面的过滤器 结果:
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
在大多数浏览器中,你可以使用过滤器:
在<img>元素和其他元素的背景图像上 并在CSS中静态设置它们,或者使用JavaScript动态设置它们
请看下面的演示。
< img >元素
你可以把这个技巧应用到<img>元素上:
#original, #changed { 宽度:45%; 填充:2.5%; 浮:左; } #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); } <img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /> <img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
背景图片
你可以把这个技巧应用到背景图像上:
#original, #changed { 背景:url (http://i.stack.imgur.com/kaKzj.jpg); background-size:封面; 宽度:30%; 利润率:0 10% 0 10%; padding-bottom: 28%; 浮:左; } #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); } < div id = "原始" > < / div > < div id = "改变" > < / div >
JavaScript
你可以使用JavaScript在运行时设置一个过滤器:
var element = document.getElementById("changed"); Var过滤器= '色调-旋转(120度)饱和(2.4)'; 元素。Style ['-webkit-filter'] = filter; 元素。Style ['filter'] = filter; #original, #changed { 利润率:0 10%; 宽度:30%; 浮:左; 背景:url (http://i.stack.imgur.com/856IQ.png); background-size:封面; padding-bottom: 25%; } < div id = "原始" > < / div > < div id = "改变" > < / div >
为了字面上改变颜色,你可以使用-webkit-filter来合并CSS转换,当有事情发生时,你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?