Question

我有包含背景图像的div，但我想将该图像设为可点击并指向某处的网站。是否可以在css或jquery中执行此操作的 HTML ：

<div id="logincontainer">
</div>

css ：

  #loginContainer {
        -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
            no-repeat scroll center center #FF660D;  /*for example */
            border-color: #FFFFFF;
            border-image: none;
            border-right: medium solid #FFFFFF;
            border-style: none solid solid;
            border-width: medium;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            position: fixed;
            min-height:200px;
            right: 0;
            top: 0;
            vertical-align: super;
            width: 100%;
            z-index: 9999999;
        }

以下是http://jsfiddle.net/a39Va/16/

我不确定是否有办法让背景图像成为可点击的，在div中指向？任何建议都会很棒。

Answer 1

做一些像：

<a href="whereYouWantToGo"><div id="loginContainer'></div></a>

或者你也可以通过JavaScript和jQuery

来做到这一点

$('#loginContainer').click(function(e) { <Whatever you want to do here> });

Answer 2

为什么不使用锚？

<a href="link" id="logincontainer">
</a>

我更新了您的jsFiddle

否则：

您可以点击任何元素，使其像jQuery链接一样。
如果您使用html5 <div>（无效）

<!DOCTYPE>

Answer 3

您需要修复背景元素的z-index，并且正如其他人所说，添加锚点或javascript操作。另外，我在页面上添加了其余内容的一些示例。你需要看看两者如何相互作用。

这是一个更新的jsFiddle

<强> HTML

<div id="loginContainer">
    <a href="#"></a>
</div>
<div class="content">
    <p>Something</p>
</div>

<强> CSS

#loginContainer {
    background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif") 
    no-repeat center #FF660D;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}
#loginContainer a {
    display: block;
    height: 100%;
    width: 100%;
}
.content {
    z-index: 2;
    position: relative;
    width: 200px;
    height: 100px;
    background: #fff;
    margin: 30px 0 0 30px;
}

Answer 4

这是Fiddle

<强> HTML

<div id="logincontainer" data-link="http://google.com"></div>

<强>的jQuery

$(function() {

  $('#logincontainer').hover(function() {

    var divLink = $(this).attr('data-link');

    $(this).wrap('<a href="' + divLink + '"></a>');

  });

});

使用css / jquery作为链接的背景图像

4 个答案: