Result
どんな背景でもテキストを読める状態にする、というもの
ちょっと語弊があるかもしれませんが、要は背景画像の明度とコントラストをfilterプロパティで抑えて#fffに指定したテキストの可読性を維持しよう、という内容です
CGMサイトなんかで使う機会があるかも、と思ったので備忘録
css
.bg {
background-image:url(https://example.com/foobar.jpg);
background-repeat:no-repeat;
background-size:cover;
bottom:0;
filter:contrast(.7) brightness(.7);/*明度とコントラストを70%にしておく*/
left:0;
position:fixed;
right:0;
top:0;
}
can i use
css-filtersのブラウザ対応状況です。
