YouTubeのチャンネルページのバナーの透明度をいじりたい。

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• YouTubeのチャンネルページのバナーの画像を不透明にしたいです。

前提

JavaScriptで、YouTubeのサイトが透明になるようにしていたところ、
チャンネルのバナーの画像までもが透明になってしまいました。
バナーの要素の構造が複雑なので、どこが最終的な透明度につながっているのかがわかりません。

発生している問題・エラーメッセージ

バナーの要素の構造が複雑なので、どこが最終的な透明度につながっているのかがわかりません。
バナーの画像を覆うような透明な要素があり、それを削除するとバナー自体が(透明になるのではなく、そのスペースがつめられてしまうのでおそらく完全に)消えてしまいます。
document.querySelector("ytd-c4-tabbed-header-renderer").style.cssTextがバナーの画像になります。これもまた奇怪で、上記の要素の中ではなく、それを覆う要素の中で画像が宣言(?)されています。

該当のソースコード

すべての要素を(半)透明にするコードです。

document.querySelectorAll("*").forEach(element => {

element.style.setProperty("background-color", "rgba(127, 127, 127, 0.05)", "important");
element.style.setProperty("background", "rgba(127, 127, 127, 0.05)", "important");

});

試したこと

バナーの構造を見たが、全然何がどうなっているのか分からなかったので、色々やってみましたが、どう調べたらいいか分からなかったので何となくわかったことを「発生している問題」のところに一通り書いておきました…

補足情報（FW/ツールのバージョンなど）

サイトの利用経験が浅いので、修正すべき点などありましたご指摘願います。
JavaScriptやCSSなどにも詳しくないので、文章ではなく出来るだけ実行可能なJavaScriptコードを書いていただける方が理解できます。（やりたいことから関数を調べたりすのは難しいが、逆は簡単で、コードの方がまだ理解できるため。）

Comments

[hoshi-takanori]

どうやって透明にしてるか知りませんが、opacity をいじってるなら、親要素を透明にして子要素だけ不透明にするのは無理なのでは…。

[...]

なるほど。一つづつ不透明に設定してみても結局透明のままということですね。
一応必要かもしれないので、すべて透明にするコードも記載しておきました…

[...]

すみません。opacityの方なんですけどいじったつもりになっていただけで、値が不透明の"1"のままになっていました…。

[...]

親要素から不透明にしていったらできました！！ありがとうございます！！

[...]

しかし、不可解なのが属性backgroundのalphaから透明度を変更しても透明のままになってしまうという点です…理由がわからなかったらまた別の枠で質問するかもしれません。

＜不透明になったソースコード＞
document.querySelectorAll('[id="backgroundFrontLayer"]').forEach(a => {
a.style.setProperty("background", "", "important");
});

Answer 1

みなさん、ご閲覧、ご指摘、コメントありがとうございました。
hoshi-takahiroさんのコメントをもとに修正を試みました。

＜詳細＞
質問文のスクリプトを実行し、親要素から一つづつ透明度の値を変更し、不透明化を試みましたが、できなかったので、質問文にあるスクリプトを実行せず、デフォルトの状態からまた親要素から一つづつ透明度の値を変更し、透明化することで調べてみたところ、どうやら、透明化により透明になっていたのではなく、style属性のbackgroundの値を変更したためだったようです。画像は質問文に記述した透明化のスクリプトを使用し、下記のバナーを不透明化するスクリプトを使用した画像です。
しかし、当の要素(赤線で囲った部分です。(バナー自体は画像の部分です。))にはbackgroundの値に特に記述がないので、なぜ解決したのかわからず、疑問は残りました。

＜不透明化するソースコード＞

document.querySelectorAll('[id="backgroundFrontLayer"]').forEach(a => {
a.style.setProperty("background", "", "important");
});