Question

使用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，以便以这种方式组合文本颜色？

Answer 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/

Answer 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/

在HTML中混合文本颜色

2 个答案: