cari

Rumah  >  Soal Jawab  >  teks badan

Garis pelik apabila menggunakan "klip latar belakang: teks" di Safari

Saya cuba membuat teks kecerunan menggunakan CSS. Pada masa ini ia berfungsi dalam Chrome dan Firefox, tetapi pada Safari saya melihat garis pelik di luar sempadan.

CSS saya kelihatan seperti ini...

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

HTML saya ringkas sahaja...

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

Tetapi pada Safari ia akan dipaparkan seperti ini.

Bolehkah sesiapa membantu saya membetulkan talian ini?

P粉788765679P粉788765679397 hari yang lalu547

membalas semua(1)saya akan balas

  • P粉262113569

    P粉2621135692024-01-05 21:12:33

    Anda boleh mencuba clip-path untuk memperbaikinya:

    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>

    balas
    0
  • Batalbalas