1. ホーム
  2. css

[解決済み] CSSで色を反転させるには?

2022-03-15 18:54:02

質問

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 ? */
}

を反転させる方法はありますか? p の色をCSSで変更できますか?

があります。 color: transparent; なぜか color: invert; CSS3でも?

解決方法は?

段落に背景と同じ色を追加し、CSSで反転させる。

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
<div>
    <p>inverted color</p>
</div>