Затенение смайликов (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-сущности для представления эмодзи.Не все текстовые редакторы поддерживают Emjois, поэтому они могут испортиться, если открыть их в одном из них.Вы можете использовать этот поиск юникода , чтобы найти версию сущности HTML ваших символов юникода.

Если вы хотите покрасить свои смайлики в другие цвета, см. этот ответ

Answer 2

Вы можете использовать тень текста

<button disabled> ?_myText </button>

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