灰色表情符号字符（HTML / CSS）

Question

我当前的问题是我试图将带有表情符号的按钮显示为灰色。

尽管如此，由于表情符号的性质，似乎无法使用HTML / CSS属性更改颜色。

即：

<button disabled> _myText </button>

<p style="color:grey">
  _myText2
</p>

Answer 1

如果您只是想将表情符号颜色更改为灰色，则可以使用filter: grayscale：

<button style="filter: grayscale(100%);" disabled>&#127912;_myText</button>

<p style="color:grey; filter: grayscale(100%);">&#128078;_myText2</p>

作为附带说明，我建议您使用HTML实体表示表情符号。并非所有的文本编辑器都支持表情符号，因此如果将它们一起打开，它们可能会损坏。您可以使用此unicode查找来查找Unicode字符的HTML实体版本。

如果您想用其他颜色给表情符号上色，请参阅此答案

Answer 2

您可以使用文本阴影

 <button disabled> _myText </button>

    <p style="color:transparent; text-shadow: 0 0 0 grey;">
      _myText2
    </p>