# 更改横幅框的不透明度？

**URL:** <https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591>\
**Category:** Development\
**Tags:** welcome-link-banner\
**Created:** [2022年六月23日 14:32 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591 "2022-06-23T14:32:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JamesDb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesdb/32/262538_2.png) [@JamesDb](https://meta.discourse.org/u/JamesDb)\
**Post date:** [2022年六月23日 14:32 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/1 "2022-06-23T14:32:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)\
**Post date:** [2022年六月23日 15:10 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/2 "2022-06-23T15:10:54Z")

</div>

@JamesDb

使用主题设置 `banner_box_background_color`，您可以输入 `rgba()` 值。您可以使用像[这个](https://cssgenerator.org/rgba-and-hex-color-generator.html)这样的生成器，然后复制并粘贴该设置的 `RGBA` 值。

或者，您也可以在主题中添加一些自定义 CSS 来应用 [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) 属性：

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

```

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

---

<div class="post-metadata">

**Author:** ![JamesDb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesdb/32/262538_2.png) [@JamesDb](https://meta.discourse.org/u/JamesDb)\
**Post date:** [2022年六月23日 15:13 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/3 "2022-06-23T15:13:01Z")

</div>

> [@keegan](#):
>
> 使用主题设置 `banner_box_background_color`，您可以输入 `rgba()` 值。您可以使用像[这个](https://cssgenerator.org/rgba-and-hex-color-generator.html)这样的生成器，然后复制粘贴该设置的 `RGBA` 值。

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

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

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

---

<div class="post-metadata">

**Author:** ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)\
**Post date:** [2022年六月23日 15:15 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/4 "2022-06-23T15:15:52Z")

</div>

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

```css
rgba(--var(--secondary-rgb), 0.5)

```

---

<div class="post-metadata">

**Author:** ![JamesDb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesdb/32/262538_2.png) [@JamesDb](https://meta.discourse.org/u/JamesDb)\
**Post date:** [2022年六月23日 15:18 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/5 "2022-06-23T15:18:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)\
**Post date:** [2022年六月23日 15:24 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/6 "2022-06-23T15:24:21Z")

</div>

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

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

```scss

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

```

---

<div class="post-metadata">

**Author:** ![JamesDb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesdb/32/262538_2.png) [@JamesDb](https://meta.discourse.org/u/JamesDb)\
**Post date:** [2022年六月23日 15:42 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/7 "2022-06-23T15:42:29Z")

</div>

> [@keegan](#):
>
> `rgba(--var(--secondary-rgb), 0.5)`

太棒了，管用，谢谢！

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2023年七月5日 06:02 UTC](https://meta.discourse.org/t/change-the-opacity-of-the-banner-box/270591/8 "2023-07-05T06:02:50Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.