Используйте CSS, чтобы сделать background-image выше background-color в списке - PullRequest
Новая
       28

Используйте CSS, чтобы сделать background-image выше background-color в списке

6 голосов
/ 13 декабря 2011

Это код 

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

По сути, в моем списке уже есть некоторые стили, например, я установил для него цвет фона.

Теперь в классе "test" я также установил background-image.

У меня вопрос: я хочу, чтобы фоновое изображение оставалось выше фонового цвета, и я не знаю, как этого добиться. Я попытался с z-index, но я думаю, что это не применимо для background-image.

Пожалуйста, посмотрите на изображение

Output

Редактировать: это код CSS

Например, это стиль для моего списка 

#sidebar ul li{  
    background:#ccf;
}

А это стиль для теста класса 

.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;
}

Ответы [ 2 ]

5 голосов
/ 13 декабря 2011

Добавьте атрибут !important к вашему background-image. Как это: 

.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;

}

У меня есть пример скрипки здесь

РЕДАКТИРОВАТЬ: я изменил класс на .test a, чтобы отразить фактическую схему стилей

4 голосов
/ 13 декабря 2011

Попробуйте: добавить специфичность в класс .test: #sidebar ul li.test

Или, еще лучше, если это возможно, добавьте background-color к классу .test и вообще избавьтесь от селектора элементов.

Я бы не использовал! Важный, если вам это абсолютно не нужно. В конечном счете, его использование сделает редактирование вашей CSS болью. Вместо использования! Важно, я предлагаю узнать о специфике: http://reference.sitepoint.com/css/inheritancecascade

...