给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
如果你只需要一个图标,就不需要整个字体集,而且我觉得它作为一个单独的元素更“干净”。因此,出于这个目的,在HTML5中可以直接在文档流中放置SVG。然后你可以在你的.CSS样式表中定义一个类,并使用fill属性访问它的背景色:
工作小提琴: http://jsfiddle.net/qmsj0ez1/
请注意,在示例中,我使用:hover来说明行为;如果您只是想更改“正常”状态的颜色,则应该删除伪类。
其他回答
你可以使用-webkit-filter和filter来使用过滤器: 过滤器对于浏览器来说相对较新,但根据以下CanIUse表:https://caniuse.com/#feat=css-filters,超过90%的浏览器支持过滤器
你可以将图像更改为灰度,深褐色和更多(请看示例)。
所以你现在可以用滤镜改变PNG文件的颜色。
body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); } .grayscale { filter: grayscale(100%); } .contrast { filter: contrast(160%); } .brightness { filter: brightness(0.25); } .blur { filter: blur(3px); } .invert { filter: invert(100%); } .sepia { filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); } .rss.opacity { filter: opacity(50%); } <!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg --> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate"> <img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
源
最简单的一句话对我很管用:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
您可以将不透明度从0调整到1,以使颜色更亮或更暗。
你可以使用滤镜:色调旋转(Ndeg),但如果图像是黑白的,色调将永远不会改变。
但是,你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩,色彩旋转滤镜可以改变。
Sepia增加了一个相当不饱和的颜色,所以增强一点滤镜:饱和(50);这使得它的颜色更深,色彩旋转可以更好地工作。
然后把它们组合在一起:
滤镜:棕褐色(100)饱和(50)色调旋转(280度)
然后尝试旋转的程度,直到你找到你喜欢的颜色。
当将一张图片从黑到白,或从白到黑时,色调旋转滤镜不起作用,因为黑色和白色在技术上不是颜色。相反,黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。
.img1 { 过滤器:反转(100%); }
试试这个:
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);