Question

如果我有一个高度为200px的DIV，并且背景应用于高度为175px的背景，那么我是否可以在图像周围包裹锚点？

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>       
</div>

除了重组我的标记之外，没有任何事情可以跳出来，我宁愿在此阶段避免这样做。

Answer 1

如果你给父div（有背景的那个）一些css：position:relative

然后你可以像这样创建一个锚：

.block2 a.block_link {
    position:absolute;
    bottom:0;
    height:175px;
    left:0px;
    width:100%;
    z-index:1;
    background-image:url(transparent.png);
    text-indent:-9999px;
}

请注意：将一个透明的png应用到链接以修复IE错误..只需1px xpp透明图像即可。

<div style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>    
    <a href="#" class="block_link">&nbsp;</a>   
</div>

保持链接上方的其他元素，即ul和span ..添加

的CSS

.block2 ul,.block2 span {
    position:relative;
    z-index:2;
}

Answer 2

你可以放入一个div，将它放在背景图像的顶部，然后将宽度和高度设置为背景图像的尺寸，然后在该div周围包裹一个锚链接。

Answer 3

你可以这样做：

<div style="position:relative; background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
   <ul class="elem"></ul>
   <span class="left_border"></span>
   <a href='#'>link</a>       
</div>

链接<a>的css：

.block a{
    display:block;
    width:100%;
    height:25px; // spared height: from the top;
    overflow:hidden;
    text-indent:-99999px;
    position:absolute;
    left:0;
    bottom:0; // or you can try with top:175px;
}

Answer 4

正如评论所说，你不能在技术上在背景图像周围放置一个链接，但我想你只是想让那个区域可以点击吗？

HTML：

<div id="my-div" style="background: url('http://www.crmpicco.co.uk/downloads/Image/11218.jpg') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
    <ul class="elem"></ul>
    <span class="left_border"></span>      
    <a href="http://www.example.com/"></a> 
</div>

CSS：

#my-div {
position: relative;
}
#my-div a {
display: block;
position: absolute;
top: 0;
left: 0;
height: 175px;
width: 100%;
}

从您的问题中不清楚您希望链接如何与UL一起使用，但您必须将列表放在链接区域下方，或者如果需要可点击，则必须使用更高的z-index。

在CSS中将锚应用于背景图像

4 个答案: