灰色表情符号字符 (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 entities for representing Emojis. Not all text editors support Emojis and so they may become corrupt if opened in one. You can use this unicode lookup 查找 Unicode 字符的 HTML 实体版本。

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

Answer 2

可以使用文字阴影

 <button disabled> _myText </button>

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

灰色表情符号字符 (HTML / CSS)

Grey out emoji characters (HTML / CSS)

html

css

colors

emoji