Question

我试图使用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

非常感谢任何帮助！

Answer 1

删除“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添加到您的身体）

仅在网站的一部分上使用照片作为封面图像

1 个答案: