Использование псевдоэлементов до и после на фоновом изображении

Я хочу создать элементы навигации из трех (фоновых) изображений, причем первое и последнее имеют фиксированную ширину, а центральная - переменную ширину, в зависимости от ширины текста в элементе навигации. Меня заставили поверить, что использование псевдоэлементов до и после будет лучшим методом. Однако, когда я пытаюсь это сделать, основное (центральное) фоновое изображение для элемента навигации перекрывается с фоновыми изображениями до и после.

Вы можете увидеть, что я имею в виду, на этой странице.

Вот CSS:

.box {
   background-image: url(nav/images/nav_02.png);
   background-repeat: repeat;
   height:20px;
   position: absolute;
   padding: 10px 13px;
}


.box:before {
    left: 0;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: 0;
    background-image: url(nav/images/nav_03.png);
}

.box:before,
.box:after {
    content: ' ';
    width: 13px;
    height:40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

И HTML:

<div class="box">here is some text</div>

Могу ли я использовать фоновые изображения таким образом, используя псевдоэлементы?

Спасибо,

Ник


html background-image pseudo-element
person Nick    schedule 03.06.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Да, но вам придется использовать левый и правый атрибуты для перемещения псевдоэлементов в правильное положение. padding не подходит для основного блока. Лучше использовать маржу.

.box {
    background-repeat-x: repeat;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat;
    height: 40px;
    position: absolute;
    margin: 0 13px;
    line-height: 40px;
}

.box:before, .box:after {
    content: ' ';
    display:block;
    width: 13px;
    height: 40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
}

.box:before {
    left: -13px;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: -13px;
    background-image: url(nav/images/nav_03.png);
}
person Oliver    schedule 03.06.2012