Блог

Главная - Вопросы по программированию - Эффект CSS-маркера в сочетании с градиентным текстом

Эффект CSS-маркера в сочетании с градиентным текстом

#html #css

Вопрос:

Я пытался добиться результата в CSS, где заголовок отображается с эффектом, похожим на маркер, и цветом градиентного текста. Это код, который я придумал для двух эффектов:

 /* GRADIENT TEXT */
h1 {
background: -webkit-linear-gradient(#229, #aaf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* MARKER EFFECT */
em {
background: gray;
}

Если я попытаюсь объединить эти два, эффект маркера просто преодолеет текст градиента.
Это, вероятно, вызвано тем фактом, что и то, и другое определяет фон, но я не знаю, как его решить.
Спасибо

Комментарии:

1. покажите свой html-код, пожалуйста

2. Это всего лишь css для отдельных элементов. Как бы то ни было, Энди Хоффман решил проблему.

3. Иногда проблема может заключаться в структуре html, и это относится не только к вашему вопросу. Пожалуйста, обратите внимание, чтобы в будущем показать все стороны вашего проекта (html, css, js и т. Д.) Для удобства человека, который даст вам ответ на ваш вопрос.

4. Да, очевидно, вложенные <em> работают. Во всяком случае, в этом случае в основном не было структуры, поэтому я не поместил это в пост. Спасибо за совет, я подумаю об этом в будущих постах.

Ответ №1:

Одна вещь, которую вы можете сделать, это создать дочерний элемент внутри em и применить там градиент.

 <h1>
  <em>
    <span>Testing</span>
  </em>
</h1>

 
 h1 span {
  background: -webkit-linear-gradient(#229, #aaf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* MARKER EFFECT */
em {
  background: gray;
} 
 <h1>
  <em>
    <span>Testing</span>
  </em>
</h1>

Комментарии:

1. Это буквально идеально. Я и раньше пытался сделать это таким образом, но, очевидно, допустил какую-то ошибку. Огромное спасибо

Метки: