Background-clip не работает на сайтах google

Question

<h1 style="background:white;color:blue;background-clip:text;">
    Eli's Opinion Website
</h1>

Часть, которая не работает, - это часть зажима. Все остальное работает. Мне просто нужно, чтобы фон текста заканчивался, когда текст заканчивается.

Answer 1

Судя по вашему описанию, вы можете найти display:inline полезным.

.header {
  display: inline;
  background: lightblue;
  color: blue;
}

<h1 class="header">
  Eli's Opinion Website
</h1>

inline
Элемент генерирует одно или несколько встроенных блоков элементов, которые не создают разрыв строки до или после себя . В нормальном потоке следующий элемент будет на той же строке, если есть пробел. - display

В зависимости от вашего контекста вы можете вместо этого использовать display:inline-block.
Также см. В чем разница между display: inline и display: inline-block?

inline-block (устаревший)
Элемент генерирует блок блочного элемента, который будет перемещаться вместе с окружающим содержимым, как если бы это был одиночный встроенный блок (ведет себя так же, как заменяемый элемент).