0

我有三个<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>
4

2 回答 2

1

添加这样的 Z-Index ：

#middle
{   width: 350px;
    background: url("images/middle.png");
    left: 405px;
    height: 250px;
    padding-top: 50px;
    background-size: 100%;
    z-index: 2;
}
于 2013-05-09T12:24:09.530 回答
0

也许您可以将三张图片合并为一张，如页面所示。​​然后使用新合并的图片作为背景图像开始布局。当我想建立我的网站时，我总是画我的网站的草图。我会处理整体测试 div 并为其设置背景图像属性。为我的池表达式感到抱歉。希望能解决您的问题。

于 2013-05-10T14:03:29.057 回答