用css滤镜做颜色不同的数据卡片（背景图对于css滤镜的使用）

本文主要是介绍用css滤镜做颜色不同的数据卡片（背景图对于css滤镜的使用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template>
<div class="xx_modal_maincon"><div class="xx_model_bt">履约起始日至计算日配额及履约情况</div><el-row><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_blue"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpess }}</span><a>碳配额试算(tCO₂)</a></div></div><div class="mod_bottom_box img_blue"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_pur"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpfl }}</span><a>碳排放量(吨)</a></div></div><div class="mod_bottom_box img_pur"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_yellow"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpeyy }}</span><a>{{tpeyytitle}}</a></div></div><div class="mod_bottom_box img_yellow"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_green"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.yjndtscyl }}</span><a>预计年度碳市场盈利(万元)</a></div></div><div class="mod_bottom_box img_green"></div></div></el-col></el-row></div>
</template><style>
.xx_modal_box{width: 100%;height: 100%;.xx_modal_tit{width: 100%;height: 2rem;text-align: center;padding: 10px 0;line-height: 2rem;}h4{color: #0f538d;font-size: 1.5rem;letter-spacing: .3rem;}.xx_modal_maincon{width: 90%;height: auto;margin: 10px 5%;padding: 10px;background-color: #f1f9f9;border-radius: 10px;.xx_model_bt{color: #0f538d;font-size: 1.3rem;letter-spacing: .3rem;height: 40px;line-height: 40px;padding-left: 30px;border-radius: 20px;background-image: linear-gradient(135deg, #d7edff  0%, #16407000 70%);}.xx_modal_mod{margin: 5px;padding: 5px;background-color: #ffffff;border-radius: 4px;box-shadow: 3px 3px 11px 0px #cccccc;height: 120px;.mod_top_box{display: flex;margin-top: 10px;.mod_right_box{height: 60px;a{font-size: 16px;color: #5a98d5}span{font-size: 30px;font-weight: bold;color: #5a98d5;line-height: 40px;display: block;}}.mod_img_box{margin: 15px;width: 60px;height: 60px;background: url(./assets/xx_img_blue.png) no-repeat;background-size: contain;}}.mod_bottom_box{height: 20px;background: url(./assets/xx_img_tiao.png) no-repeat;background-size: 100% 100%;}}}
}
//滤镜 
.img_blue{filter: hue-rotate(10deg) brightness(1.1) contrast(1.2);
}
.img_pur{filter: hue-rotate(127deg) brightness(1.1) contrast(1.2);
}
.img_green{filter: hue-rotate(286deg) brightness(1.1) contrast(1.2);
}
.img_yellow{filter: hue-rotate(198deg) brightness(1.1) contrast(1.2);
}
//底部提示
.xx_modal_tips{height: 50px;width: 100%;line-height: 50px;color: #0f538d;text-align: center;
}
</style>

实例：