フルスクリーンの第二歩
WEB
CSS
ひきつづきフルスクリーンに挑戦中。
今回は、画面を暗くしてみます。
「黒っぽい画面に白文字のほうがカッコいい」とか言い出しそうだから。
そういう場合、選び抜いた画像を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; }