Question

我有一个背景图片，它固定在页面分辨率上，它使用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;
}

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

非常感谢

Answer 1

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

body {
  background:url(images/image.png) no-repeat;
  background-size:cover;
}

如何在全尺寸固定背景上正确定位元素？ - 针对不同的分辨率

1 个答案: