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 Fiddle demo

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

作为第三个问题，它也依赖于使用自定义HTML（虽然有效的 HTML data-*）属性），这确实会使标记变得臃肿超过理想。

Answer 3

This is what you are looking for

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

示例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%);

使文本显示为三色或更多

3 个答案: