CSS如何让一个字符显示两种颜色

Question

在css中能否使一个字符以两种颜色呈现？

我的意思是例如字母"B"，上半部分为红色，下半部分为蓝色。

- Apoleo

---

不，这是不可能的。也许你可以尝试将两个B字母叠加在一起，并隐藏其中一个的上半部分，以及第二个的下半部分。 - Mazeltov

请查看 https://dev59.com/nm025IYBdhLWcg3wChKb?rq=1。 - keuleJ

Answer 1

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

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

- slynagh

---

我不是指背景！我是指文本颜色！ - Apoleo

你连试都没试过，是吗？ - slynagh

我做了：http://jsfiddle.net/LZXTS/1/ - Apoleo

-webkit-background-clip: text; -webkit-text-fill-color: transparent; - slynagh

用谷歌浏览器可以！ 但是用火狐浏览器不行。 - Apoleo

当我添加文本阴影时，整个阴影都透过文本可见，看起来很糟糕。有没有什么解决方法？ - Ian Markind

Answer 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 值的计算方式不同。

- Iulian Anghel