html - 图像重叠图片

Question

我有一个<ul>标签使用的背景图像“选择器”。<ul>我有一个 jquery 函数，它在选择菜单项时调用 Lightselector 类。光选择器类由<li>标签呈现，但我的问题是<li>标签背景图像（光选择器类）与<ul>图像“选择器”的背景图像重叠。我试过 z-index 和背景位置。

html:

<ul>BUMPER STICKERS
    <li>hello </li>
    <li>This is a paragraph.</li>
</ul>
<ul>BUMPER STICKERS
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>
</ul>

<li>光选择器：

.LightSelector {
    background-image: url(../Images/Template%20Images/Lightblue.png);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

<ul>背景图片：

ul {
    background-image: url(../Images/Template%20Images/selector.png);
    background-position:13% 102%;
    background-repeat: no-repeat;
}

jQuery：

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if (evt.target.tagName != 'UL') return;
        $("li", this).toggle();
    });
});

Answer 1

检查这个：jsfiddle.net/Nz3Fc/1/

我不确定我是否理解你，但基本上我将<ul>背景图像放在标题文本上以永久可见，并且在<li>单击标题时显示背景图像相应地显示它。

由于标题文本<ul>不再是其中的一部分，因此您不必为另一个切换背景，因为它们是独立的。如果有帮助，请告诉我。

代码如下：

HTML：

<p>BUMPER STICKERS</p>
<ul>    
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

<p>BUMPER STICKERS</p>
<ul>
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

CSS：

p {
    background-image: url(http://placehold.it/200x50);
    background-position:13% 50%;
    background-repeat: no-repeat;
}

ul {   
    background-position:13% 102%;
    background-repeat: no-repeat;
}

.LightSelector {
    background-image: url(http://placehold.it/100x400);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

JS：

$(document).ready(function () {

    $("p").click(function () {              
        $("ul li").toggle();        
    });

     $("ul li").click(function(e){
       e.preventDefault();
       $("ul li").addClass("LightSelector").not(this).removeClass("LightSelector");
    });

});

Answer 2

我只是更改了 li 标签中的图像并使其更短，因此它不会重叠。