Lignes étranges lors de l'utilisation de "background-clip: text" sur Safari
P粉788765679
P粉788765679 2024-01-04 22:03:52
0
1
463

J'essaie de créer du texte dégradé en utilisant CSS. Actuellement, cela fonctionne dans Chrome et Firefox, mais sur Safari, je vois des lignes étranges en dehors des frontières.

Mon CSS ressemble à ceci...

h1 {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

Mon HTML n'est qu'un simple...

<h1>Welcome to <span class="highlighted">My site</span></h1>

Mais sur Safari, le rendu sera comme ceci.

Quelqu'un peut-il m'aider à réparer ces lignes ?

P粉788765679
P粉788765679

répondre à tous(1)
P粉262113569

Vous pouvez essayer clip-path de résoudre ce problème :

h1 {
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
  color: transparent;
  background: linear-gradient(90deg, #FF008B, #FF006B);
  -webkit-background-clip: text;
          background-clip: text;
  padding: 1px;
  clip-path: inset(1px);
}
<h1>Welcome to <span class="highlighted">My site</span></h1>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal