css改变图片颜色(加有色滤镜)

css改变图片颜色(加有色滤镜)_第1张图片

图片需要改颜色的部分需调成纯黑色,背景为纯白色

<style type="text/css">
	.box{
		width: 230px;
		height: 200px;
		background-image: url(img/bg.png),linear-gradient(#C62F2F,#C62F2F);
		background-blend-mode: lighten;
		background-size: 100% 100%;
	}
style>
<div class="box">div>


效果如下:
css改变图片颜色(加有色滤镜)_第2张图片

支持渐变色:

<style type="text/css">
	.box{
		width: 230px;
		height: 200px;
		background-image: url(img/bg.png),linear-gradient(#FFC000,#0D8811);
		background-blend-mode: lighten;
		background-size: 100% 100%;
	}
style>
<div class="box">div>

效果如下:
css改变图片颜色(加有色滤镜)_第3张图片
浏览器支持:
在这里插入图片描述

菜鸟传送门

你可能感兴趣的:(CSS,css3)