关于html：CSS显示2种颜色的一个字符


CSS Display One Character in 2 Colors

本问题已经有最佳答案，请猛点这里访问。

在CSS中，是否可以用两种颜色生成单个字符？

我的意思是，例如，字符"B"的前半部分是红色的，后半部分是蓝色的。

相关讨论

1
2
3
4
5
6
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

填写您自己的供应商前缀。

相关讨论

一种解决方案是：

HTML：

1
<span class="half" title="B">B</span>

(请注意必须设置属性值)

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  .half {
        font-size: 90px;
        font-weight: bold;
        position: relative;
        color: blue;
        line-height: 1em;
    }

    .half:before {
        position:absolute;
        content:''attr(title)'';
        color: red;
        height: .5em;
        overflow: hidden;
    }

问题是每个浏览器计算.5em值的方式都不同