CSS - Thừa hưởng hình ảnh nền lớp

Question

CSS3 hỗ trợ nhiều hình ảnh nền, ví dụ:

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

Tôi muốn để có thể thêm một hình ảnh thứ cấp cho một phần tử với một lớp mặc dù.

Ví dụ: giả sử bạn có menu điều hướng. Và mỗi mục có một hình nền. Khi một mục điều hướng được chọn, bạn muốn lớp trên một hình nền khác.

Tôi không thấy cách 'thêm' hình nền thay vì xác minh lại toàn bộ thuộc tính nền. Đây là một nỗi đau vì để làm điều này với nhiều hình nền, bạn sẽ phải viết hình ảnh bg cơ sở hơn và hơn cho mỗi mục nếu các mục có hình ảnh độc đáo.

Lý tưởng nhất là tôi có thể làm điều gì đó như thế này:

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

Và đã li.selected của kết quả cuối cùng xuất hiện cùng nếu tôi đã làm:

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

Cập nhật: Tôi cũng đã thử sau đây không có may mắn (tôi tin rằng nguồn gốc không được kế thừa ..)

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

Answer 1

Tôi không nghĩ rằng điều này là có thể, tôi thi nk bạn sẽ phải xác định lại toàn bộ quy tắc mỗi lần.

Ví dụ: bạn chỉ có thể thêm "trình bao bọc" xung quanh mọi mục có nền ban đầu, với mục thực tế có nền trong suốt. Sau đó, thêm nền vào chính mục đó khi nó được chọn.

Answer 2

Tức là, trong mọi trường hợp, không phải cách thức hoạt động của kế thừa CSS. inherit ngụ ý rằng một phần tử nên đưa vào các thuộc tính của phần tử gốc của nó, không phải các khai báo trước đó ảnh hưởng đến cùng một phần tử.

Những gì bạn muốn đã được đề xuất như một cách để làm cho CSS hướng đối tượng hơn, nhưng gần nhất bạn sẽ nhận được là với một bộ xử lý trước như SASS.

Hiện tại, bạn chỉ cần nêu lại hình ảnh đầu tiên cùng với hình ảnh thứ hai.