CSS以2种颜色显示一个字符[重复]

【问题标题】：CSS Display One Character in 2 Colors [duplicate]CSS以2种颜色显示一个字符[重复]
【发布时间】：2014-04-07 09:13:18
【问题描述】：

是否可以在 css 中用 2 种颜色制作单个字符？

我的意思是例如字符“B” 红色的前半部分和蓝色的后半部分

【问题讨论】：

不，不可能，也许你可以尝试叠加两个B字母，一个隐藏上半部，第二个隐藏下半部..
看看stackoverflow.com/questions/6258690/…

标签： html css colors character

【解决方案1】：

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

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

【讨论】：

我说的不是背景！我的意思是文字颜色！
你都没试过是吗？
我做了：jsfiddle.net/LZXTS/1
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
是的，铬作品！用firefox不是

【解决方案2】：

一种解决方案是：

HTML：

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

（看到你必须设置一个属性值）

CSS：

  .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 值的方式不同

【讨论】：