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

我有三个链接<a>有背景的元素，但链接的一半不可点击，因为背景与文本重叠。有谁知道解决方案？html元素背景使链接无法点击

这里是我做了什么

<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>

来源

2013-05-09 user2366123

HTML似乎被打破。您有几个关闭''标签，但没有开放''标签来匹配它们。 – Boaz 2013-05-09 12:23:46

+0

@Boaz是正确的，通过http://validator.w3.org/#validate_by_input运行它;纠正这些错误将有助于长远。 – 2013-05-09 12:28:42

+0

你为什么要休息。限制你的href大小会更有意义，增加z-index不会解决这个问题，你有一些主要的编码问题，如Boaz所说的。 – Cam 2013-05-09 12:52:06

添加Z-指数这样一个例子：如图所示的页面

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

来源

2013-05-09 12:24:09

#left怎么样？ – Nitesh 2013-05-09 12:28:11

我已经玩过z-index了，但问题是无论我把哪个物品放到前面，它都会与其他物品重叠。这里是我正在尝试做的事情www.jpginc.com.au/temp.html正如你所看到的，无论我使用什么z-indexing，一些文本都会重叠...除非我错过了某些东西？ – user2366123 2013-05-10 01:13:24

也许你可以合并三张照片到一个。然后，使用新的合并图片作为背景图片开始布局。当我想要构建我的网站时，我总是绘制我的网站草图。我将整个测试div作为整体并为其设置背景图片属性感谢我的表达。希望解决你的问题。

来源

2013-05-10 14:03:29

这将工作，除了我有一个JavaScript函数，它将图片移动到鼠标光标时它变得接近，所以我需要单独的图片。我真正需要的只是使文本可点击，而不是背景。那可能吗？ – user2366123 2013-05-11 01:17:33

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

回答

相关问题