html - 推拉门透明覆盖

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。由于浏览器的不一致，填充是一种非常不可靠的设置固定高度的方法。