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