CSSを使用して色を反転するにはどうすればよいですか？

83

HTML

<div>
    <p>inverted color</p>
</div>

CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

pCSSで色を反転させる方法はありますか？

CSS3にもcolor: transparent;ないのはなぜcolor: invert;ですか？

css colors

— Bhojendra Rauniyar
ソース

1

-webkit-filter：invert（100％）;

— daniel__ 2013

1

これはあなたにとって非常に役立つかもしれません：net.tutsplus.com/tutorials/html-css-techniques/…–

— Ron van der Heijden

3

で、このフィドルWebKitのためのCSSハック、Firefox用SVGフィルター、及びで華麗なトリック：I 3つのアプローチ結合しようとしたoutline-color: invert リー・ベルーによって発明されたIEのために。残念ながら、Opera（Presto）は、アウトラインで埋められた領域をでクリップしなかったoverflowため、そこでは機能しません。このデモが今後の実験に役立つことを願っています。

— Ilya Streltsyn 2013

124

段落に同じ色の背景を追加してから、CSSで反転します。

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div>
    <p>inverted color</p>
</div>

スニペットを展開

— ブルーノレモス
ソース

これによりcolor、が反転しますが、は反転しませんbackground。と同じにcolor設定されているのはたまたまですbackground-color。背景を反転させるソリューションについては、以下を参照してください。

— ᆼᆺᆼ

8

を使用した別のアプローチをmix-blend-mode: difference次に示します。これは、単色だけでなく、背景が何であれ実際に反転します。

div {
  background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
  color: white;
  mix-blend-mode: difference;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>

スニペットを展開

— ᆼᆺᆼ
ソース

1

+1mix-blend-mode: differenceは、（モーダルなど）stackoverflow.com/a/37953806/366332でfilter: invert(100%)使用すると失敗する場合に機能しますposition: fixed

— Vanni

2

これを処理する唯一の方法はJavaScriptを使用することだと思います

この特定の要素のテキストの色を反転してみてください

css3でこれを行う場合、最新のブラウザバージョンとのみ互換性があります。

— ヤンピーター
ソース