0

我有一个固定在页面分辨率的背景图像，它使用 jquery 根据用户的监视器分辨率自动重新调整大小。这很好用，但是我知道要在顶部添加两个 div，这将是透明的，其中 HREF 悬停在背景图像的两个部分上。当我创建两个 div 时，我给了它们一个绝对位置，然后容器它们处于相对位置。但是，当我更改屏幕分辨率时，div 的更改位置。

html:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});
</script>
</head>
<body>
<div id="container">
    <img src="images/image.png" id="bg" alt="">
    <a id="company-procedures-link" href=""></a>
    <a id="company-documents-link" href=""></a>
</div>
</body>
</html>

CSS：

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

#container{
position:relative;
width:100%
height:100%
}

#procedures-link{
    position: absolute;
    top: 20em;
    left: 50em;
    width:200px;
    height:100px;
    border:1px solid;
}

#documents-link{
    position: absolute;
    top: 20em;
    left: 50em;
    width:200px;
    height:100px;
    border:1px solid;
}

有没有更好的方法来实现这一目标？还是我错误地使用了定位？

非常感谢

4

1 回答 1

1

简单的方法是使用background-size，但 IE8 及以下不支持。

body {
  background:url(images/image.png) no-repeat;
  background-size:cover;
}
于 2013-01-15T15:29:26.407 回答