html - 使文本以三色或更多颜色显示

Question

有谁知道如何使文本以三色或更多颜色显示？可以在 PHP/HTML 中使用吗？三色是指水平而不是垂直。为了更清楚地说明，水平表示印度国旗，垂直表示爱尔兰国旗。HTML中是否有任何标签或其他内容？或者可以通过 PHP 实现吗？

Answer 1

您可以使用SVG text来完成此操作，所有主流浏览器（无论如何都是较新的浏览器）都支持它。以下只是从链接中复制的。

<svg viewBox = "0 0 600 200" version = "1.1">
    <defs>
        <rect id = "r1" width = "250" height = "50" stroke = "black" stroke-width = "1"/>
        <linearGradient id = "g1" x = "0%" y = "100%">
            <stop stop-color = "olivedrab" offset = "0%"/>
            <stop stop-color = "peru" offset = "20%"/>
            <stop stop-color = "goldenrod" offset = "40%"/>
            <stop stop-color = "firebrick" offset = "60%"/>
            <stop stop-color = "thistle" offset = "80%"/>
            <stop stop-color = "sandybrown" offset = "100%"/>
        </linearGradient>
    </defs>
    <g font-size = "40">
        <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>
        <text font-size = "20" fill = "url(#g1)" stroke = "none">
            <tspan x = "10" y = "80">
                Have you wandered in the wilderness, the sagebrush desolation,
            </tspan>
            <tspan x = "10" y = "140">
                The bunch-grass levels where the cattle graze?
            </tspan>
        </text>
    </g>
</svg>

Answer 2

一种可怕的方法是使用伪元素和 CSS 生成的内容：

<p data-text="Some arbitrary text">Some arbitrary text</p>

p {
    color: #00f;
    position: relative;
    background-color: #ffa;
}

p::before {
    color: #0f0;
    content: attr(data-text);
    position: absolute;
    height: 66%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

p::after {
    color: #f00;
    content: attr(data-text);
    position: absolute;
    height: 33%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JS 小提琴演示。

虽然不幸的是，它带来了两个明显的问题（也许还有其他问题），第一个是它仅在那些实现::before/::after伪元素以及 CSS 生成的内容的浏览器中受支持。然而，第二个问题更大，因为它只适用于单行跨度（因为position: absolute定位），而不是多行。

作为第三个问题，它还依赖于使用自定义 HTML（尽管是有效的HTMLdata-*属性），这确实会使标记膨胀，而不是理想的情况。

Answer 3

这就是你要找的

只需稍微玩一下垫子，然后复制生成的行代码！

示例 CSS：

background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);