filterプロパティで、どんな背景画像でもテキストが読める状態にする

Ads

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のブラウザ対応状況です。

via

Text Over Any Background

タイトルとURLをコピーしました