1

我正在尝试使用 css 将背景照片添加到网站的一部分。我想将照片设置为“封面”，以便在访问者的浏览器允许时拉伸和调整其大小。

问题是，我想将网站分成两部分，#top 和#bottom。而上半部分约为 79%，下半部分为 21%。#top 部分将包含“封面”照片，而下半部分将具有一定的背景颜色。

我的问题是，我当前的设置“有点”适用于 IE（拉伸有点偏离），但不适用于 Firefox 和 Chrome。我尝试了很多不同的事情，但就是无法做到正确。

出现的问题是，在 Firefox 和 Chrome 中，“封面”照片剪辑位于底部背景后面，而在 IE 中，照片实际上按预期工作，并填充了 #top 部分。

<html>
 <head>
  <title>Test</title>
  <style>
        html {
          width:100%; 
          height:100%; 
          color:white;
        }

        body {
          height:100%; 
          width:100%;
        }

        #top {
          background: url(PZwx1) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale')";
          height:79%;
        }

        #bottom {background: #F9525F;height:21%;}enter code here
  </style>
 </head>
 <body>
   <div id="top"></div>
   <div id="bottom"></div>
 </body>
</html>

我已经在这里制定了示例；http://www.webdevout.net/test?02X

任何帮助深表感谢！

4

1 回答 1

3

删除“background:fixed”（这就是它使用 100% 页面高度的原因）并使用“100% 100%”而不是“cover”。那应该这样做。

    #top {
      background: url(lalala.jpg) no-repeat center center;
      background-size:100% 100%;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')";
      height:79%;
    }

如果fixed很重要，则使用background-size:100% 79%并将其更改background:center为background:top

    #top {
      background: url(lalala.jpg) no-repeat top fixed;
      background-size:100% 79%;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')";
      height:79%;
    }

（另外，添加padding:0,margin:0到你的身体）

于 2012-11-07T22:27:08.260 回答