Question

我正在尝试将CSS中的背景图像转换为可以引用的链接。我在CSS中有以下内容：

#wrapper {
height: 100%;
padding: 66px;
}


#ad_11 {
background-image: url(images/index1.png);
display: block;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: left top;
padding-top:475px;
padding-bottom:0px;
margin: 20px; 
width: 519px; 
float: left;
}

#ad_12 {
background-image: url(images/index2.png);
display: block;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: right top;
padding-top:475px;
padding-bottom:0px;
margin: 20px; 
width: 510px; 
float: left;
}

然后，我有以下HTML：

<div id="wrapper">
<div id="ad_11"></div>
<div id="ad_12"></div>
<br style="clear: both;" /> 
</div>

问题是如何将此背景图像转换为链接。这有可能吗？

感谢。

Answer 1

简短的回答是否定的，不可能将背景图像变成链接。

根据经验，我会说，如果您需要将图片作为链接，那么图片就是内容，应使用img标记添加。

如果图像用于替换某些文本，那么您可以做的一件事就是将背景图像放在锚点上并对其进行样式设置，使其达到您想要的大小并使用text-indent隐藏文本。

以下是如何执行此操作的快速示例：http://jsfiddle.net/tS27T/

a{
    background: url('image_url.jpg') 0 0 no-repeat;
    display:block;
    width:400px;
    height:400px;
    text-indent:-9999px;
}

<强>更新

要回答我认为您的新问题，我将这个演示放在一起：http://jsfiddle.net/nChaH/

Answer 2

严格来说，这是不可能的，但是，请参阅此链接以获得解决方法： http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/

背景图像作为链接

2 个答案: