CSS 선형 그래디언트를 직접 전환할 수 없는 이유는 무엇입니까?

선형 그래디언트를 사용한 CSS 전환

질문

CSS 선형 그래디언트를 배경으로 사용하여 버튼에 전환을 구현하려고 할 때 어려움을 겪을 수 있습니다. 귀하의 노력에도 불구하고 전환이 실행되지 않습니다. 코드의 잠재적인 오류를 문의하고 해결책을 찾습니다.

답변

안타깝게도 CSS에서 그라디언트의 직접 전환은 현재 지원되지 않습니다.

이 제한을 극복하려면 실용적인 대안은 원하는 그라데이션을 렌더링하기 위해 추가 요소를 도입하고 여기에 불투명도 전환을 적용하는 것입니다.

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

이 접근 방식에서 .button-helper 요소는 다음을 제공합니다. 그라데이션을 적용하고 불투명도를 부드럽게 전환하여 원하는 효과를 얻습니다.

위 내용은 CSS 선형 그래디언트를 직접 전환할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!