css - 选项卡选择器的背景图像未显示

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;

或围绕它的一些值(value)