滑動門透明覆蓋物

.menu li { 
    list-style:none; 
    float:left; 
    padding-right:20px; 
    padding-top:25px; 
} 

.menu li a, .menu li a:visited { 
    color:#ffffff; 
    font-size:12px; 
    text-decoration:none; 
    background:url(images/menu_hover_right.png) top right no-repeat; 
    padding-right:10px; 
} 

.menu span { 
    background:url(images/menu_hover.png) top left no-repeat; 
    padding-left:10px; 
    padding-top:2px; 
}

任何人都知道如何讓它們緊挨着，兩個圖像在圓的兩側都是透明的。滑動門透明覆蓋物

bug image 。

來源

2011-12-10 Sjors Snoeren

你可以試着解釋'錯誤'*是什麼？顯示你的HTML，解釋你期望輸出的樣子。顯示你的問題[JS小提琴演示/再現]（http://jsfiddle.net/）。幫助*我們*幫助你***。 –

看，我在跨度上有左背景和右背景。正常按鈕<------>以及我的按鈕的功能：<-----> - 預覽圖像：http://rockweb.nl/homebuttonbug.png –

什麼瀏覽器？ –

問題是，您實際上是向後保存圖像。左邊的圖像應該是短的，而右圖是擴展的。一旦你改變了這一切，你的CSS應該正確落入地方：

.menu { list-style: none; } 
.menu li { 
    float: left; 
    font-size: 12px; 
    margin: 25px 10px 0; } 
.menu li a { 
    background: none 0 0 no-repeat; 
    text-decoration: none; 
    padding: 0 0 0 10px; 
    display: inline-block; } 
.menu li a:hover { 
    background-image: url(images/menu_hover.png); 
    color: #ffffff; } 
.menu li a span { 
    background: none 100% 0 no-repeat; 
    float: left; 
    padding: 2px 10px 0 0; 
    display: block; } 
.menu li a:hover span { background-image: url(images/menu_hover_right.png); }

這也是通常要設置裏面既高度.menu li a和.menu li a span一個好主意。由於瀏覽器的不一致性，填充是設置固定高度的難以置信的不可靠方法。

來源

2011-12-13 18:27:57 Wex

滑動門透明覆蓋物

回答

相關問題