给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
你可以使用-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">
源
其他回答
是的:)
Surfin' Safari - Blog Archive » CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. [...] We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
你可以使用滤镜:色调旋转(Ndeg),但如果图像是黑白的,色调将永远不会改变。
但是,你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩,色彩旋转滤镜可以改变。
Sepia增加了一个相当不饱和的颜色,所以增强一点滤镜:饱和(50);这使得它的颜色更深,色彩旋转可以更好地工作。
然后把它们组合在一起:
滤镜:棕褐色(100)饱和(50)色调旋转(280度)
然后尝试旋转的程度,直到你找到你喜欢的颜色。
如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG,并将特定的颜色更改为透明(如裁剪),并使用CSS更改背景颜色。
最简单的一句话对我很管用:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
您可以将不透明度从0调整到1,以使颜色更亮或更暗。
对我来说有效的解决方案是使用滤镜:投影
滤镜:水滴阴影的工作方式不同于常规的盒子阴影。
滤镜将阴影应用于真实形状(因此它支持透明图像)。
现在的技巧是“隐藏”真实的图像,只显示阴影。
https://jsfiddle.net/d4m8x0qb/2
请注意,我的用例是将图标的颜色修改为一种纯色,所以这种方法适合我,但可能不适用于其他用例
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?