0

如果我有一个高度为 200 像素的 DIV 并应用了高度为 175 像素的背景，有没有办法只在图像周围包裹一个锚点？

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

除了重组我的标记之外，没有什么能引起我的注意，我宁愿在这个阶段避免这样做。

4

4 回答 4

5

如果你给父 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 x 1px 透明图像就可以了..

<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;
}
于 2013-01-28T17:02:05.260 回答
0

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

于 2013-01-28T17:03:39.960 回答
0

你可以这样做：

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

链接的CSS <a>：

.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;
}
于 2013-01-28T17:08:40.370 回答
0

正如评论所说，从技术上讲，您不能在背景图像周围放置链接，但我假设您只是想让该区域可点击？

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。

于 2013-01-28T17:08:46.120 回答