フルスクリーンの第二歩
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;
}