使用：之前和之後添加圖像到我的導航結束？

想知道如果這是添加圖像到我的導航開始和結束的最佳方法。因爲它代表我的導航看起來是這樣的：使用：之前和之後添加圖像到我的導航結束？

enter image description here

但實際上我想這個角件添加到它的邊緣：

enter image description here

這裏是我的我的CSS嘗試執行它：

#menu-top { 
    position:relative; 
    margin:0 -10px 0; 
    padding:.25em 0 0; 
    border-width:0; 
    color:#fff; 
    text-align:left; 
    background: url(http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontalbannermiddletop.png); 

    min-height:50px; 
} 
#menu-top:before { 
    content:''; 
    z-index: 20; 
    background: url(http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png); 
    position:absolute; 
    left:0; 
    /* bottom:-5px; */ 
    bottom: 0px; 
    width:0; 
    height:0; 
    display:block; 
    border-color:transparent #222 transparent transparent; 
    border-style:solid; 
    border-width:0px 10px 5px 0; 
} 
#menu-top:after { 
    content:''; 
    position:absolute; 
    right:0; 
    bottom:-5px; 
    width:0; 
    height:0; 
    display:block; 
    border-color:transparent transparent transparent #222; 
    border-style:solid; 
    border-width:0 0 5px 10px; 
} 
#menu-top ul { 
    position:relative; 
    margin:0; 
    padding:.5em 30px; 
    list-style-type:none; 
    text-align:center; 
} 
#menu-top ul:before { 
    content:''; 
    position:absolute; 
    top:4px; 
    left:-5px; 
    width: 34px; 
    height: auto; 
    display:block; 
    background: url(http://www.leaguememe.co.uk/wp-content/uploads/2014/01/Horizontaltop_left.png); 
} 
#menu-top ul:after { 
    content:''; 
    position:absolute; 
    top:4px; 
    right:-5px; 
    width:27px; 
    height:39px; 
    display:block; 
} 
#menu-top li { 
    display:inline; 
    margin:0 .25em 1em; 
    padding:0; 
    line-height:2.5em; 
} 
#menu-top li a { 
    background-color: #111; 
    color: #e9d6d6; 
    cursor: pointer; 
    display: inline-block; 
    font-weight: bold; 
    text-align: center; 
    line-height: 1; 
    outline: 0; 
    padding: .45em .6em; 
    white-space: nowrap; 
    -webkit-transition: background-color, -webkit-box-shadow 0.2s linear; 
} 
#menu-top li a:hover, 
#menu-top li a:active { 
    text-decoration:none; 
}

我得到的使用：之前和：之後錯了嗎？

來源

2014-01-17 Bradly Spicer

你將無法看到的背景圖片，當你pseudoelements是爲0x0的尺寸。 – Sampson

你可以通過很多方法來做到這一點，包括使用僞元素。接下來，我在我的nav元素的左上角和右上角放置了兩個元素。然後我分配了新的背景圖像，並翻轉元素右側，它反映的是在左邊：

nav { 
    position: relative; 
    width: 703px; height: 45px; 
    background: url("http://i.stack.imgur.com/PMV59.png"); 
} 

nav::before, nav::after { 
    content: ""; 
    display: block; 
    width: 95px; height: 50px; 
    position: absolute; top: -8px; left: -5px; 
    background: url("http://i.stack.imgur.com/IqsBV.png"); 
} 

nav::after { 
    left: auto; right: -5px; 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
}

導致以下：

enter image description here

我要指出的是， transform屬性僅被使用，因爲您僅提供了左側角落圖像。 Internet Explorer 8不支持此屬性（支持:before和:after）。如果您希望上述內容支持IE8，則需要放棄transform，併爲:after僞元素提供不同的背景。

演示：http://jsfiddle.net/NXP3g/1/

來源

2014-01-17 14:30:44 Sampson

使用：之前和之後添加圖像到我的導航結束？

回答

相關問題