叠加在背景图片

我建立一个网站，在陌生的路上，叠加在背景图片

对于网站设计者导航栏创造的标题和按钮内置到图像的导航栏的背景图像，并会像我一样使用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>

来源

2016-01-23 Bobby Mw

你正看着这个错误的方式。这些按钮不应该是图像的一部分，而应该将其分开放置。我建议你回到*所谓的设计师，并获得一个新的背景图像。任何有能力的设计师都应该知道这个**。 –

什么视觉效果证明有菜单链接背景图像的一部分？只需将恐龙作为身体背景，将“logo”作为PNG，菜单应该是具有透明度或PNG背景的RGBA颜色的容器，如果您真的想要渐变文字，则链接将以文本或图像形式存在。您可以检查这也是https://css-tricks.com/snippets/css/gradient-text/ – Aziz

不知道这可能帮助把可能，而不必为背景的图像。您可以使用标签？这将创建一个可点击的映射图像。 http://www.image-maps.com/ http://www.w3schools.com/tags/tag_map.asp

来源

2016-01-23 22:16:49

我会试试看，谢谢。我目前的做法是告诉设计师不要成为一个白痴，并适当地重新制作背景图片。 –

完美的工作，我学到了一个新的标签。非常感谢。 –

没问题..我一直都在用这个..一个非常好的标签。 –

你试过把杆固定或像素位置即是固定从顶部OPS的位置。

来源

2016-01-23 22:19:28 Amit

我有，页面必须是可滚动的，所以修复是不可能的，并且像素定位只会使问题变得更糟，因为背景图像会根据设备分辨率进行缩放，而导航栏不会进行相同的更改。 –

叠加在背景图片

回答

相关问题