什么？默认看片不好看
快来试试卡片背景透明化处理吧。老规矩，先上效果图
要想实现上面的效果，单纯的依靠CSS样式来实现是不行的，因为系统中是使用样式变量来实现控制的。这就需要我们先在CSS中，同样使用变量来控制样式；然后再在Script脚本中，获取和设置这个变量；从而让透明的效果不受主题颜色和暗夜模式的影响。
获取变量：getComputedStyle（）
设置变量：document.documentElement.style.setProperty（）
什么？不太懂代码。不用怕，我们只需要按照下面的顺序，一键粘贴即可实现
我们先找到：外观–自定义–额外CSS，之后把下面的代码粘贴进去。
| |
| #leftbar_announcement { |
| background: var(--themecolor-gradient) !important; |
| } |
| #footer{ |
| background: var(--themecolor-gradient) !important |
| } |
别急，还没完哦，下面设置脚本代码
我们要找到：Argon主题设置–脚本–页尾脚本，之后把下面的代码粘贴进去。
想要修改透明度，可以调整下面这些变量：
- op1——“白天”状态主题色透明度
- op2——“白天”状态卡片颜色透明度
- op3——“夜间”状态卡片颜色透明度
- op4——“夜间”状态主题色透明度
快来“客制化”调整一下吧
| |
| <script> |
| function hexToRgb(hex,op){ |
| let str = hex.slice(1); |
| let arr; |
| if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16)); |
| else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)]; |
| return `rgb(${arr.join(', ')}, ${op})`; |
| }; |
| |
| let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim(); |
| |
| let op1 = 0.7 |
| let themeColorRgb = hexToRgb(themeColorHex,op1); |
| let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient') |
| document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb) |
| |
| let op2 = 0.9 |
| let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim(); |
| colorTint92 += ', '+op2; |
| document.documentElement.style.setProperty('--color-tint-92',colorTint92) |
| |
| let op3 = 0.65 |
| let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim(); |
| colorShade90 += ', ' + op3; |
| document.documentElement.style.setProperty('--color-shade-90',colorShade90) |
| |
| let op4 = 0.8 |
| let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim(); |
| colorShade86 += ', ' + op4; |
| document.documentElement.style.setProperty('--color-shade-86',colorShade86) |
| </script> |
至此，我们的卡片就可以实现炫酷的透明效果了
