HTML元素背景使链接不可点击

我有三个链接<a>元素的背景，但一半的链接是不可点击的，因为背景重叠的文本。有人知道解决办法吗?

这是我所做的一个例子

<html>
<head>
    <style>
    li     
    {   list-style-type:none;
        list-style:none;
        position:relative;
        height:100px;
    }
#middle
{   width:350px;
    background:url("images/middle.png");
    left:405px;
    height:250px;
    padding-top:50px;
    background-size:100%;
}
#left
{   left:275px;
    width:240px;
    height:150px;
    padding:150px 60px 0 0;
    background:url("images/left.png");
    background-size:100%;
}
#right
{   left:580px;
    width:235px;
    height:150px;
    padding:150px 0 0 70px;
    background:url("images/right.png");
    background-size:100%;
}
   #test
    {   height:325px;
    }
    .Item
    {   position:absolute;
    font-size:33px;
    float:left;
    margin:15px;
    font-family: Georgia, Times, "Times New Roman", serif;
    text-align:center;
}
    </style>
</head>
<body>
<ul id="test">
    <li id="left" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="middle" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="right" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
</ul>
</body>
</html>

添加一个Z-Index:

#middle
{   width: 350px;
    background: url("images/middle.png");
    left: 405px;
    height: 250px;
    padding-top: 50px;
    background-size: 100%;
    z-index: 2;
}

也许您可以将三张图片合并为一张，如图所示。然后使用新合并的图片作为背景图像开始布局。当我想建立我的网站，我总是画我的网站草图。我将把testdiv作为一个整体，并为它设置一个background-image属性。抱歉我的泳池表情。希望能解决你的问题。

相关内容

最新更新

热门标签：