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

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

HTML布局

        
            实时降雨量 历史雨量
            
        
        
            基本信息 更多信息
        
        
            大事记 更多内容
        

核心样式表

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