css实现自适应背景图及背景图透明度处理

前言

大屏可视化在展示方式上之所炫酷是因为有很多科技感图形的衬托，这些图形可以来自图表组件，也可以是UI组件，具备科技感的UI组件实际上比常见的组件库中的组件多了一个样式属性（即backgroundImage），但是在做组件自适应的时候往往一张背景图是不能满足自适应的需求的，设置了backgroundSize之后，不同的分辨率下需要的背景图的宽高比也许不同，这样背景图呈现出来的效果可能会被拉伸或者挤压，显然这不符合我们的要求，如下图所示：

调研

1、拼接svg

最初调研了svg，发现和jpg、png实现出来的效果一样，尽管svg是矢量图形支持viewbox，也会出现拉伸的情况，之后尝试过将多个svg碎片拼接成一个支持自适应的svg（即将一张背景图，以九宫格的方式切成9份，其中定义好哪些碎片是可以重复的，这样拼接起来就支持自适应了），如下图所示：