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

根据背景颜色反转CSS字体颜色

寇照
2023-03-14
问题内容

是否有CSS属性可font-color根据background-color以下图片反转相关内容?


问题答案:

有一个CSS属性叫做mix-blend-mode,但是IE不支持。我建议使用伪元素。如果您想支持IE6和IE7,则还可以使用两个DIV代替伪元素

.inverted-bar {

    position: relative;

}



.inverted-bar:before,

.inverted-bar:after {

    padding: 10px 0;

    text-indent: 10px;

    position: absolute;

    white-space: nowrap;

    overflow: hidden;

    content: attr(data-content);

}



.inverted-bar:before {

    background-color: aqua;

    color: red;

    width: 100%;

}



.inverted-bar:after {

    background-color: red;

    color: aqua;

    width: 20%;

}


<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>


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

  • 在超文本标记语言中,我什么时候使用颜色,背景颜色和背景标签有什么区别? 有什么区别?

  • background(int $color, int $pattern = self::PATTERN_SOLID): self int $color $format = new \Vtiful\Kernel\Format($fileHandle); ​ $backgroundStyle = $format->background( \Vtiful\Kernel\Format::COLO

  • 我正在制作一个基于文本的游戏,用户输入文本来解决游戏。我决定使用JavaSwing来显示文本,我希望文本窗格的背景为黑色。我已经尝试了所有我发现的东西(注释掉了),但是没有一个看起来有效。 这里没有显示导入的图片,但是当我使用任何被注释掉的部分运行游戏时,游戏中没有错误。

  • 背景颜色是背景应用中最基础的属性,使用 background-color属性,几乎可以为任何元素定义背景颜色,该属性不能被继承,其默认值是 transparent,即透明背景。也就是说,如果一个元素没有显式定义背景颜色,那么其背景是透明的,就可以透过该元素看到其祖先元素的背景。 background-color属性接受任意合法的CSS颜色值,如预定义的颜色名、十六进制数值、RGB值、RGB百分比、

  • 通过RGB值设置背景的颜色。 默认的颜色是 0x000000: // 颜色的参数可以是字符串 "#530000" 或者是十六进制数值 0x530000 controller.setBackgroundColor("#530000); //controller.setBackgroundColor(0x530000);