Question

我想尝试完整的背景变得可点击。但它根本不起作用。

这是我的HTML

<body>

<a href="home.php">
    <div id="clickable">
        <div id="context">
            <p> TESTING </p>
        </div>
    </div>
</a>

</body>

这是我的背景脚本，使其成为完整的背景。

<script type="text/javascript">
        $(document).ready(function() {
        $("#background").ezBgResize({
            img : "assets/images/background.jpg",
            opacity : 1,
            center : true
        });
    });
</script>

最后，我的CSS ..

#clickable {
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white; 
}

我真的不想把高度放在#clickable上，因为如果我添加一些东西，背景图片会被搞砸。问题是我想让整个页面变得可点击但它根本不起作用。有什么想法吗？

Answer 1

我的方法：

http://jsfiddle.net/skozz/PyTVV/

<强> CSS：

body {
    position: relative;
}
#background {
   position: absolute;
   z-index: 0;
}
#clickable {
    z-index: 1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white; 
    position: absolute;
    color: white;
}

<强> HMTL：

<body>

    <div id="background">
        <a href="http://google.com"><img src="http://crispme.com/wp-content/uploads/3498.jpg?pass"></a>
    </div>

<a href="home.php">
    <div id="clickable">
        <div id="context">
            <p> TESTING </p>
        </div>
    </div>
</a>

</body>

Answer 2

您可以将position: absolute;添加到#clickable

#clickable {
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:1px solid white;
    position: absolute;
}

示例：http://jsfiddle.net/Mhba6/

Answer 3

仅当top或left时，CSS的{p> right position:relative和position:absolute值才会显示在图片中。已指定。否则，在没有添加position属性的情况下添加它们是没有意义的。

此外，您在标记内部有整个页面内容，标记是内联级别元素，您希望它通过使用float:left/right;浮动或简单地添加a{display:block;} <来创建块级元素/ p>

完整背景图像变为可点击

3 个答案: