Question

我有一张图片是背景图片，它会拉伸整页

它还有一个菜单栏（没有文字）

我有四个文本图像文件（约，家等）

我想将它们放在背景图像的顶部

但是当我这样做时，如果我不是全屏，他们会从菜单栏调整大小

到目前为止，如果有更简单的方法，请告诉我

    <html>
    <style> 
     body
     { 
        background: url("http://imageshack.us/a/img84/4772/backgroundnomenutext.png")
                    no-repeat scroll;
        background-size: 100% 100%;
        min-height: 700px; 
     }
    </style>
    </head>
    <body>
     <div style="position:relative">

      <a href="http://www.google.com">
       <img src="http://imageshack.us/a/img835/7200/homefw.png"

        style = "position:absolute; top: 160px; left: 100px;"/>
    </div>
    </body>
    </html>

Answer 1

尝试以百分比而不是像素为img标记提供顶部和左侧值，这样可以使它们（div和img）看起来相连。

img
{
  top : /* In percentages */
  left: /* In percentages */
}

选中 fiddle

或使用固定宽度和高度

选中此fiddle

<html>
 <head>
   <style> 
     body
     { 
        background: url("http://imageshack.us/a/img84/4772/backgroundnomenutext.png")
                no-repeat scroll;
        background-size: 1024px 768px;
        min-height: 700px; 
        max-width:1024px;
        min-width:700px;
     }
     img 
     { 
        position:absolute; 
        top: 180px; 
        left: 300px; 
     }
  </style>
</head>
<body>

 <div>
    <a href="http://www.google.com"  >
       <img src="http://imageshack.us/a/img835/7200/homefw.png"/>
    </a>
 </div>

</body>
</html>

希望这会有所帮助..

使用图像文件作为菜单文本

1 个答案: