css为背景图片添加背景颜色,css更改图片颜色

　　Css3可以改变图片的颜色。从此不用设计多张图，随时可以修改。下面简单介绍一下如何在css3中改变背景图片的颜色效果。

　　方式一:在css3滤镜中使用投影

　　代码如下：

　　style . icon { display:inline-block；宽度：180px高度：180px背景：url(img/XXX.png )无重复中心封面；溢出：隐藏；}.图标：在{内容： 之后；显示：块；身高：100%；transform:translate x(-100%)；背景：继承；滤镜：投影(144 px 0 0 # fff)；//要修改的颜色值}/style i class=icon/i说明：

　　投影滤镜可以将投影添加到元素或图片的不透明区域。

　　将透明背景PNG图标应用到没有模糊的投影相当于生成另一个颜色图标。

　　然后通过overflow:hidden和displacement处理隐藏原来的图标。

　　mix-blend-mode的值：【除了后三种，效果基本和ps一样】

　　混合-混合-模式：正常；//普通mix-blend-mode:multiply；//正重叠mix-blend-mode:screen；//颜色过滤mix-blend-mode:overlay；//Overlay mix-blend-mode:变暗；//变暗mix-blend-mode:变亮；//提亮mix-blend-mode:color-dodge；//褪色mix-blend-mode:color-burn；//颜色加深mix-blend-mode:强光；//strong光mix-blend-mode:柔光；//柔光混合-混合-模式：差异；//difference mix-blend-mode:exclusion；//排除mix-blend-mode:hue；//hue mix-blend-mode:饱和度；//饱和度mix-blend-mode:color；//颜色混合-混合-模式：光度；//亮度mix-blend-mode:初始；//默认的mix-blend-mode:inherit；//Inherit mix-blend-mode:unset；//Restore方式二:使用css3的mix-blend-mode和background-blend-mode

　　代码如下：

　　style . icon { display:inline-block；宽度：180px高度：180px背景-图像：url($img/XXX.png )，线性-渐变(#f00，# f00)；背景-混合-模式：变亮；背景-尺寸：封面；}/styleclass= icon/I描述：

　　变亮这个混合模式：变亮，变亮模式和变暗模式效果相反。黑色比任何颜色都深，所以黑色会被任何颜色代替。相反，如果材料的背景色是黑色，那么主色就是白色。那么你应该使用变暗混合模式。

　　线性渐变(#f00，#00f)也可以达到渐变颜色的效果。

总结：

　　第一种方法限于png格式的图片，第二种方法不限制图片的格式。

　　Css3有一定的兼容性。Chrome、Firefo、mobile更适合使用。

　　关于css3如何修改背景图片颜色的文章到此结束。有关css3背景图像颜色修改的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。