漏刻有时数据大屏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