如何根据背景颜色反转 CSS 字体颜色？-css教程-PHP中文网

如何根据背景颜色反转 CSS 字体颜色？

Barbara Streisand

发布： 2024-12-17 15:25:20

原创

533 人浏览过

How Can I Invert CSS Font Color Based on Background Color?

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

在 CSS 中，没有直接属性允许您根据背景颜色反转字体颜色背景颜色。但是，您可以利用多种技术来实现此效果。

使用伪元素

伪元素可用于在文本周围创建包装，这然后你就可以独立设计风格了。例如：

.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

对于不支持伪元素的旧版浏览器，您可以使用两个 DIV：

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

登录后复制

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

登录后复制

注意：具体实现可能会有所不同取决于您的具体要求和浏览器支持。

以上是如何根据背景颜色反转 CSS 字体颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！