Question

我正在以一种奇怪的方式建立一个网站，

该网站的设计者已经创建了一个背景图像，其中包含内置于图像中的导航栏的标题和按钮，并希望我使用HTML进行点击。

当我可以为特定分辨率构建它时，这实际上不是问题，如下所示。 Nav bar overlaying an image

然而，当网站的分辨率发生变化时，导航栏的位置会转移到不同的区域，使其变得无用。

nav bar position changes, making it useless

我需要一种方法让我的导航栏对齐并将其自身缩放到背景图像。

HTML：

<!DOCTYPE html>
<head>
    <title>
        Patrick Walsh 3D
    </title>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    <div id="nav">
        <a href="index.html">
            <div id="homeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="resume.html">
            <div id="resumeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="tutorial.html">
            <div id="tutorialButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="contact.html">
            <div id="contactButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
    </div>
</body>

CSS：

<style>

#buffer{}


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

#nav{
    background-color:white;
    opacity:.5;
    width:58%;
    height:50px;
    position:absolute;
    top:25%;
    left:21%;
}

#nav a{
    clear:left;
    float:left;
}

/*Divs that overlay buttons on background image*/
#homeButton{
    background-color:green;
    width:13%;
    height:80%;
    position: absolute;
    left:1%;
    top:2px;
}

#resumeButton{
    background-color:red;
    width:16%;
    height:80%;
    position: absolute;
    left:26%;
    top:2px;
}

#tutorialButton{
    background-color:blue;
    width:17%;
    height:80%;
    position: absolute;
    left:52%;
    top:2px;
}

#contactButton{
    background-color:orange;
    width:17%;
    height:80%;
    position: absolute;
    left:78%;
    top:2px;
}

</style>

Answer 1

不知道这可能有助于将Maybe放在而不是将图像作为背景。你可以使用标签吗？这将创建一个可点击的映射图像。 http://www.image-maps.com/ http://www.w3schools.com/tags/tag_map.asp

Answer 2

您是否尝试将条形图的位置固定为固定位置或从顶部固定的像素位置。

覆盖在背景图象的导航条

2 个答案: