Comment inclure une décoration de texte dans l'effet background-clip : text; ?

Question

J'utilise -webkit-background-clip: text,border et color: transparent sur une balise d'ancrage et il semble que le soulignement ne devienne jamais visible.

Ce que je veux, c'est inclure la décoration du texte dans le détourage de l'arrière-plan.

Voici mon 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 */
}

Et le HTML correspondant :

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

J'ai beaucoup de mal à trouver une documentation complète sur les propriétés CSS de WebKit. Quelqu'un sait-il ce que je peux faire pour que le texte souligné apparaisse au survol de ma balise d'ancrage ?

Answer 1

Vous pouvez changer votre -webkit-text-fill-color en une valeur RGBA, comme ceci ; -webkit-text-fill-color: rgba(0,0,0,0.3); Cela permet d'afficher le soulignement. Il suffit de jouer avec l'opacité et les valeurs rgb pour qu'elles correspondent à la couleur de votre fond, etc.

Answer 2

J'ai testé cela sur Chrome 50.0 et Firefox Nightly 49.0a1 (qui prend également en charge -webkit-background-clip: text depuis la version 48.0 )

Et aussi loin que je puisse voir, contre la documentation de WebKit il n'y a aucun moyen d'inclure la décoration du texte ou les ombres du texte dans le détourage.

Selon un Bogue de chrome -webkit-text-decorations-in-effect les cibles pour corriger les problèmes d'héritage liés à la norme text-decoration bien que cela n'affecte évidemment pas la propriété -webkit-background-clip: text de quelque manière que ce soit.

Answer 3

Vous obtenez effectivement le soulignement, mais il a aussi une couleur transparente :)

Answer 4

Andrew,

Vous ne pouvez pas voir le soulignement si vous utilisez color:transparent. Essayez le code ci-dessous, vous verrez le soulignement au survol.

    .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;}`