用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>

实例: 

 全部资料:https://download.csdn.net/download/galaxyJING/88998544?spm=1001.2014.3001.5503

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机Linux-openEuler硬盘空间扩容

虚拟机Linux-openEuler硬盘空间扩容 1、需求场景 我们在使用虚拟机时&#xff0c;可能会出现磁盘空间不够用导致各种bug出现的情况。 首先&#xff0c;我们要扩展虚拟机的可用磁盘空间。如图所示&#xff0c;我的原本硬盘大小为8G&#xff0c;我们扩展到30GB 2、打开虚拟机…

android_uiautomator元素定位

通过UIAUTOMATOR的text属性定位到元素&#xff0c;并打印文本from appium import webdriver from appium.webdriver.common.appiumby import AppiumBy import time # For W3C actions from selenium.webdriver.common.action_chains import ActionChains from selenium.webdriv…

1_88. 合并两个有序数组

1_88. 合并两个有序数组 难度: 简单 提示: 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意…

使用U盘重装CentOS7系统

下载CentOS7 系统镜像 制作启动U盘之前&#xff0c;首先要准备一个系统镜像&#xff0c;这里我在CentOS官网直接下载镜像文件&#xff1a; CentOS官网 为了保证下载速度&#xff0c;这里我使用阿里云镜像下载&#xff1a; 阿里云镜像 如上图所示&#xff0c;我需要一个带UI界…

ES 进阶知识

索引Index 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字来标识&#xff08;必须全部是小写字母&#xff09;&#xff0c;并且当我们…

pytorch代码中optimizer.step()和scheduler.step()有什么区别

optimizer.step()通常用在每个patch_size之中(一个patch_size的数据更新一次模型参数)&#xff0c;而scheduler.step()通常用在epoch里面,但是不绝对&#xff0c;可以根据具体的需求来做。只有用了optimizer.step()&#xff0c;模型才会更新&#xff0c;而scheduler.step()是对…

【机器学习】无监督学习算法之:K均值聚类

K均值聚类 1、引言2、K均值聚类2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.4.1 距离计算公式2.4.1 中心点计算公式 2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; K均值聚类 我不懂&#xff0c;能不能给我讲一讲&#xff1f; 小鱼&#xff1a;行&#xf…

latex在写算法`\For` 和 `\EndFor` 以及 `FOR` 和 `\ENDFOR` ,报错Undefined control sequence.

这里写目录标题 1. 错误原因2. 进行改正3. 爱思唯尔期刊与施普林格期刊对于算法的格式不太一样&#xff0c;不能直接套用总结 1. 错误原因 我在算法中使用\For&#xff0c;\EndFor 2. 进行改正 换成FOR&#xff0c;\ENDFOR 3. 爱思唯尔期刊与施普林格期刊对于算法的格式不太…

CMake学习笔记(一)一个最简单的CMakeLists嵌套示例

目录 1 mkdir project_macro 2 在project_marco中建立CMakeLists.txt 3 建立专门的src文件夹 4 在src中添加main.cpp和CMakeLists.txt 5 回到project_macro目录&#xff0c;建立build文件夹 6 进入build 文件夹&#xff0c;开始cmake 7 在build文件夹里执行make指令 8 …

Softmax到底行还是列

对于二维张量&#xff0c;飞话不多说&#xff0c;直接看代码 input_tensor torch.tensor([[2,3,5],[2,2,2],[3,1,3]], dtypetorch.float32) # input_tensor torch.rand((1000,1000,100)) print(input_tensor) print("*"*40) print("沿着dim1&#xff0c;计算…

直播行业网络安全建设

一、引言 直播行业近年来蓬勃发展&#xff0c;吸引了大量用户和资本的关注。然而&#xff0c;随着行业的壮大&#xff0c;网络安全问题也日益凸显。构建一个安全、稳定的直播行业网络对于保障用户权益、维护行业秩序具有重要意义。本文将详细探讨直播行业安全网络的构建与保障…

MongoDB知识

1、部署MongoDB &#xff08;1&#xff09;new好一个mongo文件之后执行 &#xff08;出现mongodb.key&#xff09;记得放行端口 openssl rand -base64 666 > mongodb.key &#xff08;2&#xff09;放到一个docker-compose.yml之后docker-compose up -d执行 version: 3.…

JavaSE系统性总结全集(精华版)

目录 1. 面向对象&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;详解 1.1 面向过程和面向对象的区别 1.2面向对象的三大特性 1.2.1 封装 1.2.2 继承 1.2.3 多态 1.2.4 方法重写和方法重载的区别&#xff08;面试题&#xff09; 1.2.5 访问权限修饰符分…

《自动机理论、语言和计算导论》阅读笔记:p5-p27

《自动机理论、语言和计算导论》学习第2天&#xff0c;p5-p27总结&#xff0c;总计23页。 一、技术总结 1.集合 (1)commutative law of union. (2)distribute law of union. 2.归纳法(induction) & 演绎法(deduction) (1)归纳法&#xff1a;从许多个别的事实或原理中…

代码随想录算法训练营第十六天| 104.二叉树的最大深度、559.n叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

系列文章目录 目录 系列文章目录104.二叉树的最大深度①递归法直接法(求深度&#xff0c;前序遍历)间接法&#xff08;求高度&#xff0c;后序遍历&#xff09; ②迭代法&#xff08;层序遍历中有&#xff09; 559.n叉树的最大深度①递归法间接法&#xff08;后序遍历求高度&am…

canvas画带透明度的直线和涂鸦

提示&#xff1a;canvas画线 文章目录 前言一、带透明度的直线和涂鸦总结 前言 一、带透明度的直线和涂鸦 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…

咕炮课堂Java架构师课程

课程介绍 主要针对1到5年及以上工作经验的开发人员&#xff0c;提供互联网行业热门技术的Java架构师专题培训&#xff0c;由业内技术大牛&#xff0c;行业及实战经验丰富的讲师进行技术分享。内容涵盖redis,mongodb,dubbo,zookeeper,kafka 高并发、高可用、分布式、高性能、并…

雪里温柔,水边明秀,不及Java 抽象类 和 Object类

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Collection与数据结构 顺序表与ArrayList

1. 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列… 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线。但是在…

A Novel Negative Sample Generating Method for KnowledgeGraph Embedding

摘要 为了有效地提取知识图中的关系和原因&#xff0c;将实体和关系编码到一个连续的低维语义空间中。在负样本生成阶段&#xff0c;大多数知识图嵌入方法更注重替换头或尾实体以提高训练效率&#xff0c;很少替换关系。这些负样本生成方法对关系预测的贡献不大。本文提出了一…