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

前言

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

​​​调研

1、拼接svg

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

​​​于是乎写了一个svg拼接的工具，将上图中9张svg碎片拼接成一个自适应的svg，并支持下载。

​​​​​​

这种方式虽然实现了但是切图过程和拼接逻辑比较繁琐复杂。

2、安卓切图

之后调研了安卓切图规范，这种方式是可行的。

​

CSS3 实现自适应背景图

结合安卓点九切图规范生成的切图，使用border-image属性设置即可。

{
    border-image:url(/i/border.png) 30 30 round;
}

​​​背景图透明度处理​

​

​在样式中添加filter属性，实现下图效果，是不是很神奇，这样就不需要因为背景图透明问题让设计重新切图了。

{
    background: url(/assets/images/blueAlert1Info.3885cb44.svg) 0% 0% / cover;
    /* 新增filter属性 */
    filter: drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}

​​​

​