0

我对 css 和 html 还很陌生，但我想尽可能多地学习。我正在为一个网站（www.revivalfest.org）制作一个简单的“启动页面”。我有一个可以随浏览器调整大小的背景 div，但是我的内容（视频和社交媒体图标）在调整浏览器大小时会四处移动。我希望视频以“Savannah, Ga”为中心，无论浏览器大小和屏幕分辨率如何，都可以保留在那里。

我试过将它放在一个容器中，以及摆弄各种 div 宽度和换行但没有运气。希望你们都可以帮助解决这个问题。

先感谢您！

这是我的代码：

 <html>
 <head>
 <title>Revival Fest Coming Soon</title>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  <style type="text/css">
   html, body {height:100%; margin:0; padding:0;}

        #background {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0;}

          .stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

        #video {position:absolute; z-index:0; top:310; left:482;}

        #fb {position:absolute; z-index:0; top:755; left:175;}

        #twitter {position:absolute; z-index:0; top:758; left:255;}

   </style>
  </head>
  <body>
  <div id="background">
      <a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/revivalsplashmoreinfo67.jpg" class="stretch" alt="" /></a>
  </div>
  <div id="video">
        <iframe width="725" height="432" src="http://www.youtube.com/embed/kKqHnc91tzk?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id="fb">
        <object><a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/fb.png"></a></object>
  </div>
  <div id="twitter">
        <object> <a href="https://twitter.com/savrevivalfest"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/twit.png"></a></object>
  </div>
  </body>
  </html>
4

1 回答 1

0

您可以做的是使用百分比边距并使用媒体查询来定义断点。如果你真的需要背景是这样的图像，否则最好的办法是使用物理文本，这样所有东西都可以相对定位。

于 2013-06-25T17:01:48.593 回答