よもやまチョモランマ

フルスクリーンの第二歩

ひきつづきフルスクリーンに挑戦中。
今回は、画面を暗くしてみます。
「黒っぽい画面に白文字のほうがカッコいい」とか言い出しそうだから。

そういう場合、選び抜いた画像をPhotoshopで加工してUPするのかな~なんてアナログに考えていたのですが。
ふと、CSSで出来そうな気がしたのでググってみたところ、案の定、簡単にできました。

【参考】HTML&CSS rgbaを使って背景画像を暗くする

.fullscreen::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

濃度を調整したいときは、background-color のところを opacity にしたほうがいいかも。

.fullscreen::before{
  background-color: black;
  opacity: 0.4;
}