1

cssを使用してWebサイトの一部に背景写真を追加しようとしています。写真を「カバー」として設定し、訪問者のブラウザが許可するように写真を拡大およびサイズ変更したいと思います。

問題は、ウェブサイトを#topと#bottomの2つの部分に分割したいということです。上半分は約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％を使用するため）を削除し、「cover」の代わりに「100％100％」を使用します。それはそれをする必要があります。

    #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 に答える