Mengapakah Saya Tidak Boleh Mengalihkan Gradien Linear CSS Secara Terus?

Peralihan CSS dengan Kecerunan Linear

Soalan

Semasa anda cuba melaksanakan peralihan pada butang menggunakan kecerunan linear CSS sebagai latar belakangnya, anda mungkin menghadapi kesukaran. Walaupun usaha anda, peralihan itu gagal dilaksanakan. Anda bertanya tentang kemungkinan ralat dalam kod anda dan dapatkan penyelesaian.

Jawapan

Malangnya, peralihan langsung kecerunan dalam CSS tidak disokong pada masa ini.

Untuk mengatasi had ini, a alternatif praktikal melibatkan memperkenalkan elemen tambahan untuk menghasilkan kecerunan yang diingini dan menggunakan peralihan kelegapan padanya:

<code class="css">a.button {
  position: relative;
  z-index: 9;
  /* ... Additional style properties ... */
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  /* ... Additional style properties ... */
  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

HTML:

<code class="html"><a href="#" class="button">
  <span class="button-helper"></span>
  button
</a></code>

Dalam pendekatan ini, elemen .button-helper menyediakan kecerunan dan peralihan kelegapannya dengan lancar, mencapai kesan yang diingini.

Atas ialah kandungan terperinci Mengapakah Saya Tidak Boleh Mengalihkan Gradien Linear CSS Secara Terus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!