如何用css改变图片的颜色? |
您所在的位置：网站首页 › hbuilder设置背景颜色 › 如何用css改变图片的颜色? |
如何用css改变图片的颜色?
|
前言
在多主题的系统中，需要不同颜色的icon，如何通过css任意来改变icon的颜色呢？本文提供了三种改变icon图片颜色的方法。 方法一：多背景混合方法原理是：background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。 其中background-blend-mode: lighten 表示，最终颜色是每个颜色通道下，两个背景色最亮值所组成的颜色。比如，将颜色rgb(111,150,222)和颜色rgb(222,111,34)进行lighten混合，最终的颜色值是取各通道下最大值组成。因此混合颜色为rgb(222,150,222)。 由于，黑色rgb(0,0,0)的每个通道都是0，因此黑色与任何颜色进行lighten混合，都是该颜色。 白色rgb(255,255,255)的每个通道都是255，因此白色与任何颜色进行lighten混合，都是白色。 基于上述分析，我们可以很容易地将一个白色背景的黑色图片改变颜色。 第一步：将白底黑色的图片作为元素的背景图。 第二步：给元素设置一个背景色，这个颜色就是要改变icon图片的颜色。 第三步：给元素设置background-blend-mode:lighten，将背景色和背景图混合。 .icon1{ height: 100px; width: 100px; background-image:url(./Flamingo.jpg); background-color: red; background-blend-mode:lighten; background-size: cover; } 复制代码 方法二：子元素和父元素背景混合方法子元素和父元素背景混合方法，与多背景混合方法类似。不同之处在于，mix-blend-modeCSS 属性描述了元素的背景与其直系父元素的背景混合。 mix-blend-mode:lighten也表示，最终颜色为两个背景色各通道中最亮值所组成的颜色。 第一步：将白底黑色的图片作为子元素的背景图。 第二步：给父元素设置一个背景色，这个颜色就是要改变icon图片的颜色。 第三步：给子元素设置mix-blend-mode:lighten，将父子元素的两个背景混合。 .container{ background: red; display: inline-block; } .icon2{ height: 100px; width: 100px; background-image:url(./Flamingo.jpg); mix-blend-mode: lighten; background-size: cover; } 复制代码 方法三：滤镜方法红色在色轮中色相hue为0deg。如改变颜色，只需调整改变色相度数。css3 filter滤镜，提供了filter: hue-rotate()色相旋转放方法。可以利用滤镜hue-rotate方法改变图片颜色。更多关于色轮、色相和色相旋转等更多知识请参看这篇博文 红色的HSL值为hsl(0, 50 , 100)，通过调整hue度数,可以得到不同的纯色，如旋转120度得到绿色hsl(120, 50 , 100)。为了方便起见，我们初定图片为红色，通过filter: hue-rotate()，可以得到任意颜色。如果目标颜色不是纯色，可以相应的调整饱和度filter:saturate()和明亮度filter:brightness()的值。 将红色图片，通过旋转120度便为你绿色。 .icon3{ height: 100px; width: 100px; filter: hue-rotate(120deg); } 复制代码 实例代码及图片
多背景混合方法原理 rgb(111,150,222) + rgb(222,111,34) = rgb(222,150,222) rgb(255,255,255) + rgb(0, 0, 255) = rgb(255, 255, 255) rgb(0,0,0) + rgb(0, 0, 255) = rgb(0, 0, 255)方法一：多背景混合方法 方法二：子元素和父元素背景混合方法 方法三：滤镜方法 
复制代码
总结
方法一和方法二都是基于混合，提供的图片最好是白底黑图。
方法二基于css filter滤镜，提供的图片最好是红色的图片。
以上方法，都需要注意兼容性,IE浏览器不支持。。。
|
【本文地址】
今日新闻 |
推荐新闻 |