Question

我有三个带有背景的链接<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>

Answer 1

像这样添加一个Z-Index：

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

Answer 2

也许您可以将三张图片合并为一张，如页面所示。然后使用新合并的图片作为背景图片开始布局。当我想建立我的网站时，我总是画一幅我的网站草图。将测试div视为一个整体，并为它设置一个background-image属性。对于我的池表达感到抱歉。希望解决你的问题。

html元素背景使链接无法点击

2 个答案: