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

2024-03-20 11:12

本文主要是介绍用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>

实例: 

这篇关于用css滤镜做颜色不同的数据卡片(背景图对于css滤镜的使用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/829275

相关文章

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

Linux系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻