CSS - CSS3 예를 들어, 여러 개의 배경 이미지를 지원

Question

상속 계층 배경 이미지 :

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); } 

그래도 클래스와 요소에 보조 이미지를 추가 할 수 있도록하고 싶습니다

.

예를 들어, 당신은 nav 메뉴가 있다고 가정 해보십시오. 그리고 각 항목에는 배경 이미지가 있습니다. 탐색 항목을 선택하면 다른 배경 이미지 위에 놓을 수 있습니다.

전체 배경 속성을 다시 선언하는 대신 배경 이미지를 '추가'하는 방법이 없습니다. 이는 다중 배경으로이를 수행하기 위해 항목에 고유 한 이미지가있는 경우 각 항목에 대해 기본 bg 이미지를 계속 작성해야하기 때문에 고통입니다.

가 이상적으로 나는 이런 식으로 뭔가 할 수있을 것입니다 : 내가 한 경우의

li { background: url(baseImage.jpg); } 
li.selected { background: url(selectedIndicator.jpg); } 

을 그리고 li.selected 한 최종 결과는 동일하게 나타납니다

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); } 

업데이트 : 나는 또한 시도 행운을 따라가는 (나는 배경이 상속받지 않는다고 믿는다.)

li { background: url(baseImage.jpg), none; } 
li.selected { background: inherit, url(selectedIndicator.jpg); } 

Answer 1

나는 이것이 가능하다고 생각하지 않는다. 매번 전체 규칙을 다시 정의해야합니다.

예를 들어 배경이 투명하고 실제 배경이있는 모든 항목 주위에 "래퍼"를 추가 할 수 있습니다. 그런 다음 항목이 선택되면 항목 자체에 배경을 추가하십시오.

Answer 2

즉, 어떤 경우에도 CSS 상속이 작동하지 않습니다. inherit은 요소가 동일한 요소에 영향을 미치는 이전 선언이 아니라 상위 요소의 특성을 취해야 함을 의미합니다.

CSS가 객체 지향적이되도록하는 방법으로 제안되었지만 가장 가까운 것은 SASS와 같은 프리 프로세서입니다.

이제 실제로는 첫 번째 이미지를 두 번째 이미지와 함께 다시 표시해야합니다.