Sử dụng CSS để làm background-image trên background-color trong một danh sách

Question

Đây là mã

<ul> 
    <li class="test"> 
     <a href="#"> 
      <h2>Blah</h2> 
      <p>Blah Blah Blah</p> 
     </a> 
    </li> 
</ul> 

Về cơ bản, danh sách của tôi đã có một số phong cách, ví dụ, tôi đặt background-color cho nó.

Bây giờ trong lớp "kiểm tra", tôi cũng đặt hình nền.

Câu hỏi của tôi là tôi muốn làm cho hình nền luôn ở trên màu nền và tôi không biết cách đạt được điều này. Tôi đã thử với z-index nhưng tôi nghĩ rằng nó không áp dụng cho background-image.

Xin hãy nhìn vào hình ảnh

Chỉnh sửa: Đây là Bộ luật CSS

Ví dụ, đây là phong cách cho danh sách của tôi

#sidebar ul li{ 
    background:#ccf; 
} 

Và đây là kiểu cho bài kiểm tra lớp học

.test{ 
    background-image: url('img/big_tick.png'); 
    background-repeat:no-repeat; 
    background-position: bottom right; 
    -moz-background-size: 30%; 
    -webkit-background-size: 30%; 
    background-size: 30%;  
    margin-right: 30px; 
} 

Answer 1

Thêm thuộc tính !important vào background-image của bạn. Như thế này:

.test a{ 
background-image: url('img/big_tick.png') !important; 
background-repeat:no-repeat; 
background-position: bottom right; 
-moz-background-size: 30%; 
-webkit-background-size: 30%; 
background-size: 30%;  
margin-right: 30px; 

}

Tôi có một ví dụ fiddle here

EDIT: Tôi đã thay đổi lớp để .test a để phản ánh các chương trình phong cách thực tế

Answer 2

Hãy thử: thêm đặc hiệu vào lớp .test: #sidebar ul li.test

Hoặc tốt hơn nữa, nếu có thể, thêm background-color đến lớp .test, và thoát khỏi bộ chọn yếu tố hoàn toàn.

Tôi sẽ tránh sử dụng! Quan trọng trừ khi bạn thực sự cần nó. Về lâu dài, sử dụng nó sẽ làm cho việc chỉnh sửa css của bạn trở nên đau đớn. Thay vì sử dụng! Quan trọng, tôi khuyên bạn nên tìm hiểu về tính đặc hiệu: http://reference.sitepoint.com/css/inheritancecascade