更改横幅框的不透明度？

开发
1

是否可以更改横幅框的不透明度？

2

@JamesDb

使用主题设置 banner_box_background_color，您可以输入 rgba() 值。您可以使用像这个这样的生成器，然后复制并粘贴该设置的 RGBA 值。

或者，您也可以在主题中添加一些自定义 CSS 来应用 opacity 属性：

.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    opacity: 0.5; // 使用 0 到 1 之间的值
}

不过，上面的 CSS 方法也会改变内容的透明度（使文本透明度降低）。

3

有没有办法保留变量，例如 var(--secondary)，但为其添加不透明度？

因为我希望它能适应浅色和深色模式

编辑：我已经尝试过 rgba(var(--secondary), 0.5)

4

我认为这应该可以工作（尽管我还没有测试过）：

rgba(--var(--secondary-rgb), 0.5)
5

它不起作用。它会完全移除颜色。

6

嗯，我明白了。代码需要使用 background-color 属性来支持这一点，但它使用的是 background。

如果将此添加到你的主题 CSS 中，应该就可以正常工作了：


.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    background-color: rgba(var(--secondary-rgb), 0.5);
}
7

太棒了，管用，谢谢！