0

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

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

我有四个文本图像文件（关于、家庭等）

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

但是当我这样做时，如果我不在全屏模式下，它们会调整菜单栏的大小

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

    <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>
4

1 回答 1

0

尝试以百分比而不是像素为img标签提供顶部和左侧值，这将使它们（div和img）看起来附加。

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

检查这个小提琴

或者使用固定的宽度和高度

检查这个小提琴

<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>​

希望这可以帮助..

于 2012-12-04T06:13:41.547 回答