WebShell中实现终端自定义背景图

最近推出的WebShell实现了自定义背景图，这里mark下整体方案

技术方案

整体方案如图，大致的实现细节是

1. 终端方案xterm.js支持透明背景，因此这里设置为透明背景
2. 补充一个终端的兄弟DOM元素，且在前，通过CSS设置背景图，背景图作为终端的底，但是同时通过opacity设置透明度
3. 终端的父元素设置为纯色，不需要透明度

如上即可实现具备透明度的自定义终端背景图了

Demo

戳这里