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

· 1 min read

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

技术方案

https://static.1991421.cn/2023/2023-03-06-235223.jpeg

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

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

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

Demo

戳这里

WebShell
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related