バナーボックスの不透明度を変更しますか？

開発
1

バナーボックスの不透明度を変更することは可能ですか？

「いいね！」 2
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アプローチではコンテンツの不透明度も変更されます（テキストの不透明度が低下します）。

「いいね！」 2
3

変数 var(--secondary) をそのまま使用し、それに透明度を追加する方法はありますか？

ライトモードとダークモードに対応させたいからです。

編集：rgba(var(--secondary), 0.5) はすでに試しました。

「いいね！」 2
4

これで機能するはずです（テストはしていませんが）：

rgba(--var(--secondary-rgb), 0.5)
「いいね！」 1
5

機能しません。完全に色がなくなり、取り除かれてしまいます。

「いいね！」 1
6

なるほど、理由がわかりました。コードはそれに対応するために background-color プロパティを使用する必要がありますが、background を使用しています。

テーマの CSS に以下を追加すると機能するはずです。


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

素晴らしい、うまくいきました、ありがとう！

「いいね！」 3
8

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