滑动门透明覆盖

Question

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

任何人都知道如何让它们彼此相邻，两个图像在圆边都是透明的。

Answer 1

问题在于您实际上是在向后保存图像。左图像应该是短图像，右图像应该是扩展图像。一旦你改变了，你的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内设置高度通常也是个好主意。由于浏览器不一致，填充是一种非常不可靠的设置固定高度的方法。