在 HTML 中混合文本颜色答案

【问题标题】：Mixing text colors in HTML在 HTML 中混合文本颜色
【发布时间】：2013-01-27 04:14:47
【问题描述】：

使用 HTML，有没有办法根据每个文本选择所在的标签来混合文本颜色？此伪代码描述了我尝试创建的文本颜色混合类型：

<red>
    This text should be red.
    <blue>
        This text should be purple, since it is inside red and blue tags.
    </blue>
    This text should be red.
    <white>
        This text should be pink, since it is inside white and red tags.
    </white>
</red>

是否可以将此伪代码转换为有效的 HTML，以便以这种方式组合文本颜色？

【问题讨论】：

标签： html

【解决方案1】：

动态地，不是without scripting。但是，您可以定义一些 CSS 规则。

.red {
    color: red;
}
    .red .white,
    .white .red {
        color: pink;
    }
    .red .blue,
    .blue .red {
        color: purple;
    }
.blue {
    color: blue;
}
    .blue .white 
    .white .blue {
        color: light-blue;
    }

等等

这可以根据您的需要简单或复杂。

编辑：这是用于演示目的的 jsfiddle：http://jsfiddle.net/LhSk2/

【讨论】：

这解决了我的问题。 :) 是否也可以使用透明图像背景来做到这一点（以便根据周围的标签混合图像？）
你需要半透明的PNG图片并将它们作为背景。

【解决方案2】：

如果你不必支持IE8及以下，你可以使用半透明的RGBA颜色：

<div style="background: red">
    This text should be red.
    <div style="background: rgba(128, 0, 128, .5)">
        This text should be purple, since it is inside red and blue tags.
    </div>
    This text should be red.
    <div style="background: rgba(255, 255, 255, .5)">
        This text should be pink, since it is inside white and red tags.
    </div>
</div>

这是小提琴：http://jsfiddle.net/zT8JD/

【讨论】：

@AndersonGreen - 这仅适用于背景颜色。如果要使用文本颜色执行此操作，则必须指定实际颜色。
为什么它不能与文本颜色以及背景颜色一起使用？
@AndersonGreen - 因为本地声明将始终覆盖父声明。使用半透明背景色时，父级的背景色会透过透明度泄漏。
这里有一个稍微复杂一点的例子：jsfiddle.net/jarble/zT8JD/1 这个效果在视觉上很有趣，我觉得。 :)
只是出于好奇：是否可以使用透明图像背景和彩色背景来做到这一点？