漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案

简介: 漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案

在数据可视化大屏中,经常出现同样的图片作为背景,但是尺寸不同,需要做多个背景图片的情况。这样不仅增加了切图工作,更是在无形中增加了图片的加载数量。如图所示:



HTML布局

<div class="dPanel4">
        <div class="dPanel4_1">
            <div class="normTitle">实时降雨量 <span class="layui-btn layui-btn-sm layui-bg-blue rightBtn">历史雨量</span></div>
            <div class="realRain" id="realRain"></div>
        </div>
        <div class="dPanel4_2">
            <div class="normTitle">基本信息 <span class="layui-btn layui-btn-sm layui-bg-blue rightBtn">更多信息</span></div>
        </div>
        <div class="dPanel4_3">
            <div class="normTitle">大事记 <span class="layui-btn layui-btn-sm layui-bg-blue rightBtn">更多内容</span></div>
        </div>
</div>


核心样式表

dPanel4 {
    position: absolute;
    bottom: 110px;
    left: 10px; /*控制右侧距离*/
    z-index: 999;
    height: 332px;
    padding: 10px;
}
.dPanel4_1, .dPanel4_2, .dPanel4_3 {
    float: left;
}
.dPanel4_1 {
    width: 700px;
    height: 100%;
    padding: 32px;
    background: rgba(7, 20, 36, 0.4);
    background-image: url('../images/board01.png'), url('../images/board02.png'), url('../images/board03.png'), url('../images/board04.png'), url('../images/board05.png'), url('../images/board06.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, center top, right top, left bottom, center bottom, right bottom;
    border: 1px solid #476991;
    -webkit-filter: drop-shadow(0px 2px 16px rgba(7, 20, 36, 0.5));
}
.dPanel4_2, .dPanel4_3 {
    margin: auto 10px;
    width: 440px;
    height: 100%;
    padding: 32px;
    background: rgba(7, 20, 36, 0.4);
    background-image: url('../images/board01.png'), url('../images/board02.png'), url('../images/board03.png'), url('../images/board04.png'), url('../images/board05.png'), url('../images/board06.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, center top, right top, left bottom, center bottom, right bottom;
    border: 1px solid #476991;
    -webkit-filter: drop-shadow(0px 2px 16px rgba(7, 20, 36, 0.5));
}


@lockdata.cn

相关文章
|
14天前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
|
2天前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
17天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
21 1
|
17天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
27 1
|
20天前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
1月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
1月前
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
30 8
|
30天前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
1月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
1月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。