如何使用CSS反转颜色-码文网

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

有没有办法用 CSS 反转p颜色？

有color: transparent;为什么不color: invert;即使在 CSS3？

166

将背景的相同颜色添加到段落，然后使用 CSS 反转：

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

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

这里是一个不同的方法使用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 adicit elit, sed do</p>
</div>

我认为处理这个问题的唯一方法是使用 JavaScript

如果您使用 css3 执行此操作，则仅与最新的浏览器版本兼容。

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处

CSS参考手册是一本关于CSS语言的参考书，由W3C组织出版，包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考，可以帮助开发者快速学习和使用CSS语言，从而更好地创建网页。…

2023-06-29 01:40:51

0 86 89 48

CSS登录界面模板代码是一种使用CSS来制作登录界面的代码，它可以帮助开发者快速制作出美观且易于使用的登录界面，以下是一个简单的CSS登录界面模板代码：…

2023-05-06 06:17:54

0 80 89 77

如何使用CSS反转颜色