HTML – 覆盖背景图像上的导航栏

2019年7月20日 389次阅读

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

该网站的设计者创建了一个背景图像,其中包含内置于图像中的导航栏的标题和按钮,并希望我使用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>

最佳答案 不知道这可能有助于把Maybe而不是将图像作为背景..你可以使用标签??

这将创建一个可点击的映射图像.

http://www.image-maps.com/

http://www.w3schools.com/tags/tag_map.asp

点赞