Как включить оформление текста в background-clip: text;эффект?

Question

Я использую -webkit-background-clip: text,border и color: transparent для тега привязки, и кажется, что подчеркивание никогда не становится видимым.

Я хочу включить текстовое оформление в вырезку фона.

Вот мой CSS:

.background-clip {
  background: url(images/index-background.jpg) repeat top center fixed;
  -webkit-background-clip: text,border;
  color: transparent;
}

.background-clip a {
  color: transparent;
}

.background-clip a:hover {
  text-decoration: underline;
  -webkit-text-decorations-in-effect: underline; /* doesn't seem to do anything, I am having trouble finding definitive documentation on this */
}

и связанный HTML:

<div class="background-clip"><a href="#">Imagine a lot of text here</a></div>

У меня много проблем с поиском полной документации по свойствам CSS WebKit.Кто-нибудь знает, что я могу сделать, чтобы подчеркивание текста появилось при наведении курсора на якорь?

Answer 1

Вы можете изменить свой -webkit-text-fill-color на значение RGBA, вот так; -webkit-text-fill-color: rgba(0,0,0,0.3); Это позволяет отображать подчеркивание. Просто поиграйте со значениями opacity и rgb, чтобы они соответствовали цвету вашего фона и т. Д.

Answer 2

Я проверял это на Chrome 50.0 и Firefox Nightly 49.0a1 (который также поддерживает -webkit-background-clip: text с версии 48.0 )

И, насколько я вижу, по отношению к документации WebKit нет способа включить оформление текста или тени текста в вырезку.

В соответствии с ошибка Chromium -webkit-text-decorations-in-effect предназначена для исправления проблем наследования, связанных ск стандартному свойству text-decoration, хотя оно, очевидно, никак не влияет на -webkit-background-clip: text.

Answer 3

Вы на самом деле получаете подчеркивание, но оно также имеет прозрачный цвет:)

Answer 4

Андрей,

Вы не можете видеть подчеркивание, если используете цвет: прозрачный.Попробуйте код ниже, вы увидите подчеркивание при наведении курсора.

    .background-clip {
     background:url(images/index-background.jpg) repeat top center fixed;
    -webkit-background-clip: text,border;
     color: transparent;}

    .background-clip a {
     color:red;
    text-decoration:none;}

    .background-clip a:hover {
    text-decoration:underline;
    -webkit-text-decorations-in-effect: underline;}`