灰显表情符号(HTML/CSS) [英] Grey out emoji characters (HTML / CSS)

问题描述

我目前的问题是，我试图将一个带有表情符号的按钮变灰。

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

即：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<button disabled> 🎨_myText </button>

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

推荐答案

如果您只想将Emoji颜色更改为灰色，可以使用filter: grayscale：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

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

顺便提一句，我建议您使用HTML entities来表示表情符号。并不是所有的文本编辑器都支持表情符号，所以如果用一个表情符号打开它们可能会变得腐败。您可以使用此unicode lookup查找Unicode字符的HTML实体版本。

如果您希望将表情符号涂成其他颜色，请参阅this answer

这篇关于灰显表情符号(HTML/CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！