html - 在 CSS 中将 anchor 应用于背景图像

Question

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

<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

然后您可以像这样创建一个 anchor :

.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;
}