タグ

ブックマーク / blanktar.jp (1)

  • CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar

    いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし

    CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar
    kuracom
    kuracom 2022/08/01
  • 1