当前位置: 首页 > 面试题库 >

如何使用CSS反转颜色?

孟茂学
2023-03-14
问题内容

的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>


 类似资料:
  • 问题内容: 是否有CSS属性可根据以下图片反转相关内容? 问题答案: 有一个CSS属性叫做mix-blend-mode,但是IE不支持。我建议使用伪元素。如果您想支持IE6和IE7,则还可以使用两个DIV代替伪元素。

  • 是否有CSS属性来根据来反转,就像这张图片一样?

  • 问题内容: 我需要将在黑色背景字母上绘制为白色的一系列图像转换为白色和黑色反转(为负)的图像。如何使用PIL实现此目的? 问题答案: 请尝试以下文档中的内容:http : //effbot.org/imagingbook/imageops.htm 注意:“ ImageOps模块包含许多“现成的”图像处理操作。该模块有些实验性,大多数操作员只能处理L和RGB图像。

  • 问题内容: 我尝试更改滚动条的颜色,但是在这里它不起作用。 CSS: 问题答案: 您可以为webkit使用以下属性,这些属性可以连接到 影子DOM : 这是一个带有红色滚动条的工作小提琴,基于此页面上的代码解释了这些问题。 使用此解决方案和您的解决方案,您可以处理除Firefox之外的所有浏览器,Firefox在这一点上我认为目前仍需要JavaScript解决方案。

  • 问题内容: 我做了一些谷歌搜索,这是我的答案 这里唯一的问题是镜像的中心不是对象的中心,因此也许我们需要一些JavaScript才能将对象移动到所需位置。 问题答案: 您的代码是正确的,但是有一种更简单的方法可以做到这一点: 我认为这可以解决您居中的镜像问题。 如前所述,您必须将元素设置为使用块,行内块等的显示。

  • 问题内容: 如何反转OpenCV的Java API中存储的图像的颜色?使用使我出错。 问题答案: 方法将尝试取矩阵的逆函数,这就是失败的原因(很可能您的图像矩阵不可逆)。 您可以相互减去两张图像,因此可以创建所有值均为255的图像,然后从中提取原始图像(如果这是通过反转颜色表示的)。