動画の上にオーバーレイで薄い黒を載せたのが、明暗差の縞々が出たのを解消した話

WEBサイトを制作していて、
トップページのファーストビューで全画面動画にしていまして、
その動画の上に白い太文字でキャッチコピーを重ねて中央に表示させていました。

それが、たまたま違うPC　Windows11の違うPCで見たときに、
オーバーレイした20%のbackgroundの黒が、うっすらと明暗差の感じで縞々に見えてしまいました。

今まで、自分の古いwindows10のPCで見ていたときは、
全くそのような縞々（バンディング？）は出ていなかったので、

初めは、windows11のPCのNvidiaのグラボの更新とか、windows11の更新のせいなのかとかいろいろ調べてやってみましたが、
縞々は解消されませんでした。

そこで、ネットで調べてみたら、参考になるサイトがありました。

画像にできる濃淡の縞「バンディング」をおさえる方法

直接これと同じ現象ではありませんでしたが、これを見てひらめきました！
グラデーションとか、透明度とか、オーバーレイで明暗差の縞々になることがあるとわかりました。

そこで、私が過去に作った、同じようなサイトを見ると、縞々に見えない正常なものがあったので、
ＣＳＳを確認すると、正常にオーバーレイで表示できていたのは、小さいami.pngの画像をリピートしてbackgroundに指定していたものでした。
⇒

background: url(../images/ami.png) repeat rgba(0, 0, 0, 0.5);

そして、縞々になっていたのは、色で指定していたものでした。
⇒

background-color: rgba(0, 0, 0, .2);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(25%, transparent), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .5)));
    background-image: -webkit-linear-gradient(bottom, transparent 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5));
    background-image: -o-linear-gradient(bottom, transparent 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5));
    background-image: linear-gradient(
0deg
, transparent 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5));

なので、
ami.pngを縞々に見えているサイトのimageフォルダにアップロードして、
CSSをbackground: url(../images/ami.png) repeat rgba(0, 0, 0, 0.5);
に書き換えたら、縞々の問題が解消されました。

オーバーレイで指定するときは、色指定の透明度とか指定すると、縞々のバンディングが出る場合があるみたいですね。
今まで自分の環境で出ていなかったんですが、どこかのPCでは出ていたかと思うと、解消できて良かったです。