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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。