Question

我正在尝试在li元素上使用背景图像来指示当前选项卡正在被选中。图像意图与li元素重叠，以显示li元素顶部和底部的半边框，这些边框在标签面板的侧面上下翻转。

问题是图像没有显示，即使它被清楚地找到（根据开发工具）。如果我在包含背景的div周围设置背景颜色或框架，则会正确显示并使用正确的尺寸。这是我目前的代码：

<ul class="ulTabSelect">
  <li><a href="#charTab">Character</a><div class="tabLiBG"></div></li>
  <li><a href="#skillTab">Skills</a><div class="tabLiBG"></div></li>
  <li><a href="#equipTab">Equipment</a><div class="tabLiBG"></div></li>
</ul>

和css：

ul.ulTabSelect {
    font: 16px Verdana,sans-serif;
    left: 0;
    margin-top: 200px;
    top: 550px;
    width: 135px;
}

ul.ulTabSelect a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    color: #9F9270;
    display: block;
    font: bold 1em sans-serif;
    padding: 5px 10px;
    text-align: right;
    text-decoration: none;
}

ul.ulTabSelect a:hover {
    color: #FFFFCC;
}


ul.ulTabSelect li {
    position: relative;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 0.1em solid rgba(0, 0, 0, 0.9);
    margin-bottom: 2px;
}

.ui-state-active .tabLiBG {
    position: absolute;
    display: block;
    top: -36px;
    left: 110px;
    width: 45px;
    height: 84px;
    background-image: url("/img/liSelect.png");
    background-repeat: no-repeat;
    background-position: 90px -27px;
    background-color: transparent;
    opacity: 1.0;
    z-index: 3;
}

.tabLiBG {
    display: none;
}

您还可以在www.esobuild.com上看到此操作，它是左侧的主要标签选择器。有点想在这里试图让它运作起来。

Answer 1

如果你设置

，它可以正常工作

background-position: -17px 11px;

或围绕

的某些价值

Answer 2

我在你的html中找不到班级ui-state-active。这可能是个问题。

选项卡选择器的背景图像没有出现

2 个答案: