【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: 【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面

这是我们最终想要达到的效果,并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度!

开始准备物料

第一步:切片,建议用九宫格的形式,切割有考究,主要是最大限度、最小尺寸囊括多个边界转角处的样式(亮蓝色是参考线,白色文字是描述区域规则,红色文字是宽高、分割输出的png图片文件名,正中的宫格就用1像素宽高png背景图拉伸[注意是拉伸不是平铺!])

第二步:输出文件(一共是9个png文件:lt、mt、rt、lm、mm、rm、lb、mb、rb.png),需要注意小细节,我的每张图片都做了透明度,只为让卡片有一丢丢的透明效果

第三步:定义样式(如果嫌弃我的代码太多,可以无脑照搬直接拷贝代码,只要严格按照上图的切片命名规则,适当修改下变量$l_w、$r_w、$t_h、$b_h的像素值就可以搞定了)

<div class="sg-card"></div>
// 酷炫卡片背景************************************************
.sg-card {
    // 公共变量定义----------------------------------------
    $card-bg: "~@/assets/softwareIndustryBigBrain/common/card/"; //异形背景图片路径前缀
    // $card-bg-color: #020f2e; //中间背景纯色
    $l_w: 46px; //左侧边界宽度
    $r_w: 88px; //右侧边界宽度
    $t_h: 72px; //顶部边界高度
    $b_h: 46px; //底部边界高度
    // ----------------------------------------
    // display: inline-block;//这个根据实际情况来(非必选)
    min-width: calc(#{$l_w} + #{$r_w}); //最小宽度等于左右两端边界宽度之和
    min-height: calc(#{$t_h} + #{$b_h}); //最小高度等于上下两端边界高度之和
    // background-color: $card-bg-color; //背景色(不需要,被mm.png替代)
    background-repeat: no-repeat; //一定要用不平铺的属性
    // 核心代码----------------------------------------
    background-image: 
        // 顶部左、中、右
        url(#{$card-bg}lt.png), url(#{$card-bg}mt.png), url(#{$card-bg}rt.png),
        // 中间层左、中、 右
        url(#{$card-bg}lm.png), url(#{$card-bg}mm.png), url(#{$card-bg}rm.png),
        // 底部左、中、右
        url(#{$card-bg}lb.png), url(#{$card-bg}mb.png), url(#{$card-bg}rb.png);
    background-position: 
        // 顶部左、中、右
        left top, $l_w top, right top,
        // 中间层左、中、 右
        left $t_h, $l_w $t_h, right $t_h,
         // 底部左、中、右
        left bottom, $l_w bottom, right bottom;
    background-size: 
        // 顶部左、中、右
        $l_w $t_h, calc(100% - #{$l_w} - #{$r_w}) $t_h, $r_w $t_h,
        // 中间层左、 中、右
        $l_w calc(100% - #{$t_h} - #{$b_h}), calc(100% - #{$l_w} - #{$r_w}) calc(100% - #{$t_h} - #{$b_h}), $r_w calc(100% - #{$t_h} - #{$b_h}),
        // 底部左、中、右
        $l_w $b_h, calc(100% - #{$l_w} - #{$r_w}) $b_h, $r_w $b_h;
}

最后我们来看看实现的效果吧:

最小宽高样式

宽度600px高度450px

宽度900px高度400px

怎么样满足你大数据展示各种需求了吧?一种淡淡的透明效果,更有视觉感、通透性!


相关实践学习
基于MaxCompute的热门话题分析
Apsara Clouder大数据专项技能认证配套课程:基于MaxCompute的热门话题分析
相关文章
|
数据采集 SQL 数据可视化
大数据可视化技巧:借助PowerBI提升数据故事讲述力
【4月更文挑战第8天】Power BI助力大数据可视化,支持多种数据源连接,如SQL Server、Excel,提供数据清洗与转换功能。通过选择合适图表类型、运用颜色和大小强化表达,创建交互式仪表板。讲述数据故事时,注重故事主线设计,利用叙事技巧引导观众,并添加文本说明。分享已完成报告,提升数据驱动决策能力。动手实践,体验Power BI的强大与易用。
460 0
|
SQL 分布式计算 数据可视化
Tableau与大数据:可视化工具在大数据分析中的应用
【4月更文挑战第8天】Tableau是一款领先的数据可视化工具,擅长于大数据分析,提供广泛的数据连接器,支持多源整合。它与Hadoop、Spark等深度集成,实现高效大数据处理。Tableau的拖拽式界面和交互式分析功能使得非技术人员也能轻松探索数据。在实战中,Tableau用于业务监控、数据storytelling和自助式分析,推动数据民主化,提升决策效率。未来,Tableau将持续创新,扩展生态系统,并保障数据安全与合规性,助力企业最大化数据价值。
866 0
|
1月前
|
存储 供应链 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在企业供应链风险预警与决策支持中的应用(204)
本篇文章探讨了基于 Java 的大数据可视化技术在企业供应链风险预警与决策支持中的深度应用。文章系统介绍了从数据采集、存储、处理到可视化呈现的完整技术方案,结合供应链风险预警与决策支持的实际案例,展示了 Java 大数据技术如何助力企业实现高效、智能的供应链管理。
|
2月前
|
存储 数据采集 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在城市交通拥堵溯源与治理策略展示中的应用(191)
本项目探索了基于Java的大数据可视化技术在城市交通拥堵溯源与治理策略中的应用。通过整合多源交通数据,利用Java生态中的大数据处理与可视化工具,构建了交通拥堵分析模型,并实现了拥堵成因的直观展示与治理效果的可视化评估。该方案为城市交通管理提供了科学、高效的决策支持,助力智慧城市建设。
|
3月前
|
存储 数据采集 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在城市地下管网管理与风险预警中的应用(275)
本文系统阐述 Java 与大数据可视化技术在城市地下管网管理中的应用,涵盖数据采集、三维建模、风险预警及性能优化,结合真实案例提供可落地的技术方案。
|
数据可视化 Java 大数据
Java 大视界 -- 基于 Java 的大数据可视化在城市规划决策支持中的交互设计与应用案例(164)
本文围绕基于 Java 的大数据可视化在城市规划决策支持中的应用展开,分析决策支持现状与挑战,阐述技术应用方法,结合实际案例和代码,提供实操性强的技术方案。
|
5月前
|
数据采集 数据可视化 数据挖掘
基于Python的App流量大数据分析与可视化方案
基于Python的App流量大数据分析与可视化方案
|
11月前
|
消息中间件 监控 数据可视化
大数据-79 Kafka 集群模式 集群监控方案 JavaAPI获取集群指标 可视化监控集群方案: jconsole、Kafka Eagle
大数据-79 Kafka 集群模式 集群监控方案 JavaAPI获取集群指标 可视化监控集群方案: jconsole、Kafka Eagle
398 2
|
分布式计算 数据可视化 大数据
于SpringBoot+大数据城市景观画像可视化设计和实现
于SpringBoot+大数据城市景观画像可视化设计和实现
|
11月前
|
存储 分布式计算 资源调度
大数据-04-Hadoop集群 集群群起 NameNode/DataNode启动 3台公网云 ResourceManager Yarn HDFS 集群启动 UI可视化查看 YarnUI(一)
大数据-04-Hadoop集群 集群群起 NameNode/DataNode启动 3台公网云 ResourceManager Yarn HDFS 集群启动 UI可视化查看 YarnUI(一)
246 5

热门文章

最新文章