0

ページ解像度に固定された背景画像があります。これは、jqueryを使用して、ユーザーのモニター解像度に基づいて自動的にサイズを変更します。これはうまく機能していますが、背景画像の2つの部分にホバリングするHREFを含む透明な2つのdivを上に追加する方法を知っています。2つの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

Simple way is to use background-size, but it is not supported by IE8 and below.

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