Với CSS, tôi có thể đặt nhiều hình nền từ các lớp khác nhau không?

Question

Tôi biết rằng có thể tạo nhiều lớp nền với CSS, nhưng tôi có thể lớp nhiều hình nền đến từ các lớp khác nhau không? Giả sử tôi có các div hoạt động như những viên gạch có thể có núi hoặc đồi và có thể thuộc về một quốc gia nhất định.

.mountain { 
    background: url("mountain.png"); 
} 
.hill { 
    background: url("hill.png"); 
} 
.bluecountry { 
    background: url("bluecountry.png"); 
} 
.redcountry { 
    background: url("redcountry.png"); 
} 
.greencountry { 
    background: url("greencountry.png"); 
} 

sẽ là css của tôi. Tuy nhiên, điều này không hoạt động; khi tôi làm một cái gì đó như

<div class="hill bluecountry"> 

nó sẽ không làm lớp nền và sẽ chỉ sử dụng một trong số chúng. Có cách nào để thực hiện công việc này không? Tôi thực sự có nhiều thứ hơn thế này, và nó sẽ là một sự lãng phí thời gian để phải viết riêng CSS nhiều hình nền cho mọi kết hợp có thể.

Answer 1

Không có cách nào để hợp nhất thuộc tính background bằng nhiều lớp - chỉ có thể đặt một lần. Những gì bạn có thể làm là:

1. tạo một div container (position: relative)
2. nơi nhiều divs bên trong container (position: absolute)
3. áp dụng một lớp học riêng cho mỗi tiểu div
4. Các hình ảnh có thể mỗi được đặt trong vùng chứa bằng cách sử dụng top: 0px; left: 0px; và với background-position.

Dưới đây là một ví dụ về những gì tôi có nghĩa là:

HTML

<div class="container"> 
    <div class="first"></div> 
    <div class="second"></div> 
</div>​ 

CSS

html, body { height: 100%; } 
div { 
    display: inline-block; 
    width: 400px; 
    height: 100px; 
} 
.container { 
    position: relative; 
} 
.first, .second { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.first { 
    background: url(http://lorempixel.com/200/100/sports/1) no-repeat; 
} 
.second { 
    background: url(http://lorempixel.com/200/100/sports/2) no-repeat; 
    background-position: right center; 
} 

http://jsfiddle.net/32G4A/2