在背景圖像上使用僞元素之前和之後

Question

我想從三個（背景）圖像構造導航項目，其中第一個和最後一個固定寬度，並且中央有一個可變寬度，具體取決於文本的寬度在導航項中。我被引導認爲在前後使用僞元素將是最好的方法。當我嘗試這樣做時，導航項目的主（中央）背景圖像與前後背景圖像重疊。

你可以看到我的意思是this page。

這裏是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> 

我可以使用僞元素使用這種方式的背景圖像？

感謝，

尼克

Answer 1

是，但，你將不得不使用左，右屬性，用於移動在正確的位置僞元素。填充不正確的主盒子的位置。更好地使用保證金

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