호버상의 여러 배경 중 하나만 변경하십시오.

Question

제목은 기본적으로 모두를 말합니다. 다른 하나는 각각의 모든 국가에서 동일하게 유지하지만, 여전히 사를 선언하고 있습니다 -

#element { 
    background: url(image.png) no-repeat center center, 
       linear-gradient(to top, #86a53c, #516520); 
} 

#element:hover { 
    background: url(image.png) no-repeat center center, 
       linear-gradient(to top, #A0C153, #516520); 
} 

#element:active { 
    background: url(image.png) no-repeat center center, 
       linear-gradient(to top, #516520, #A0C153); 
} 

당신이 볼 수 있듯이, 배경 이미지 변화의 한 : 여기

---

은 예입니다 번!

그래서 배경 중 하나만 변경하고 다른 하나는 그대로두면 되나요? 반복해서 다시 선언하지 않아도됩니까?

_{다른 CSS 배경 속성 (반복, 위치 등)을 별도로 설정할 수 있다는 것을 알고 있습니다. 이것은 단지 간단한 예입니다 ...}

Answer 1

이 CSS 변수를 수있게되었습니다 :

#element { 
    --gradient: linear-gradient(to top, #86a53c, #516520); 

    background: url(image.png) no-repeat center center, 
       var(--gradient); 
} 

#element:hover { 
    --gradient: linear-gradient(to top, #A0C153, #516520); 
} 

행동에 여기를 참조하십시오 https://jsfiddle.net/22zu6oaq/

Answer 2

아니, 아직 죄송합니다. 이것은 구문과 캐스케이드의 관점에서 어떻게 재생 될지 확신 할 수 없지만 제안 할 수있는 추가 기능처럼 들립니다.