如何正確定位全尺寸固定背景上的元素？ - 對於不同的分辨率

我有一個固定在頁面分辨率的背景圖片，它使用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; 
}

有沒有更好的方式來實現這一目標？還是我錯誤地使用定位？

非常感謝

來源

2013-01-15 m1243

他們會因爲你使用的EM是一個相對單位。如果你想要的位置相同，不管分辨率是什麼，然後使用px。 –

目前還不清楚你想把鏈接放在不同大小的屏幕上，你能描述一下嗎？可能你需要設置左邊/頂部的百分比值，比如'top：50％;'。 – antejan

簡單的方法是使用background-size，但它不是由IE8和下方支撐。

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

來源

2013-01-15 15:29:26 antejan

嗨，謝謝你的迴應，我已經改變爲定位的像素值，現在它可以在不同的分辨率下工作。將頂部和左側值設置爲50％會使圖像顯示在頁面的中間並帶有白色背景。背景封面效果很好。當用戶重新調整瀏覽器窗口大小時，是否有辦法使元素的位置絕對正確？此時元素不符合背景圖像。也許這是不可能的？很多謝謝 – m1243

你有沒有嘗試以百分比（比如50％）爲元素頂部/左側的值？ – antejan

如何正確定位全尺寸固定背景上的元素？ - 對於不同的分辨率

回答

相關問題