我有一个固定在页面分辨率的背景图像，它使用 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;
}
有没有更好的方法来实现这个目标？还是我错误地使用了定位？
非常感谢
最佳答案
简单的方法是使用 background-size , 但 IE8 及以下版本不支持。
body {
background:url(images/image.png) no-repeat;
background-size:cover;
}
关于jquery - 如何在全尺寸固定背景上正确定位元素？ - 针对不同的分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14340301/