CSS - фоновое изображение для элемента li - PullRequest
Новая
       1

CSS - фоновое изображение для элемента li

1 голос
/ 26 марта 2011

All

У меня есть элементы списка, для которых установлен фон (значение RGBA).

Теперь я хочу добавить другое изображение, используя свойство фонового изображения CSS3 для каждого элемента списка. По какой-то причине это изображение не отображается рядом с элементом списка.

HTML 

                <div id="c_top_bar">
                <ul>
                                        <li id="c_collar" class="c_tabs"><span>Collar/ Neckline</span></li><li id="c_body" class="c_tabs"><span>Body</span></li><li id="c_sleeve" class="c_tabs"><span>Sleeve</span></li><li id="c_colour" class="c_tabs"><span>Colour</span></li>
                </ul>
            </div>

А вот и CSS : 

    #c_top_bar ul {
    position: relative;
    top: 30px;
    left: 40px;
    width: 650px;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(207,207,207,1);
    -moz-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
    -webkit-box-shadow: 0px 1px 2px rgba(207,207,207,0.5);
    box-shadow: 0px 1px 2px rgba(207,207,207,0.5);      
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.c_tabs {
    display: inline-block;
    width: 25%;
    height: 48px;
    list-style-type: none;
    text-align: center;
    -moz-text-shadow: 0px 1px 2px rgba(255,255,255,1);
    -webkit-text-shadow: 0px 1px 2px rgba(255,255,255,1);
    text-shadow: 0px 1px 0px rgba(255,255,255,1);
    background-image: url(tick.png);
}

.c_tabs:first-child {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; 
}   

.c_tabs:last-child {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

Существует немного больше стиля, который я применил к тегам 'span', но мы пропустили код, так как он не имеет большого значения.

У меня вопрос: когда я ввожу следующий CSS-код в класс .c_tabs (элементы li), изображение не отображается, firebug сообщает, что «не удалось загрузить данный URL», почему? 

background-image: url(tick.png);

Большое спасибо

Ответы [ 3 ]

4 голосов
/ 26 марта 2011

Это нормально работает на моем конце в Firefox.Убедитесь, что изображение доступно на пути.URL, определенный в CSS, предполагает, что файл изображения будет доступен в той же папке, что и файл CSS.Если файл изображения находится в другом месте, обновите URL-адрес соответствующим образом.

0 голосов
/ 05 октября 2012

Относительный путь будет работать следующим образом background-image:url("../Images/transparent.gif");, пока CSS находится в папке Таблицы стилей , а обе папки Таблицы стилей и Изображения находятся в корне той же папки.

0 голосов
/ 26 марта 2011

Вы можете использовать что-то вроде 

background:url(tick.png) 0 100% repeat-x;

вместо background-image: url(tick.png);

здесь я использовал repeat-x;повторить изображение по оси х.Вы можете использовать repeat-y;или без повтора;тоже.

...