5

相対的なCSS/ブートストラップ初心者。

このCSSトリックページの最初の方法を使用して、背景画像を取得してTwitterBootstrapと統合しようとしばらく時間を費やしました。HTMLが機能しなかったため、CSSタグとして「body」を使用することになりました。一般的にすべてが正常に機能している間、画像は上部のナビゲーションバーの「後ろ」から始まり、下に伸びているため、上部は黒いナビゲーションバーの後ろに隠れています。

margin-topを使用して、背景画像の上部をナビゲーションバーの下部に揃えようとしましたが、これにより、コンテナーとそれ以降のすべてのコンテンツも下に移動します（明らかに、全身にマージンを設定しているため）ページの）。

また、背景画像（backgroundimage）の一意のクラスを作成し、bodyタグのすぐ内側にdivを配置し、html closeタグの直前でdivを閉じることも試みましたが、もう一度調整すると、すべてのページコンテンツが調整されます。背景画像だけ。

ナビゲーションバーの下にあるbackground-imageのdivを移動すると、アクティブな「コンテナ」スペースに制限されるため、background-imageは画面の中央3分の1にのみ存在するようになります。

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

background-imageのサイズ変更プロパティを考えると、画像自体を変更して上部にスペースを作成するというハッキーなソリューションは明らかに機能しません。その背景画像をナビゲーションバーの下にCSSするにはどうすればよいですか？

4

3 に答える 3

7

background-positionを使用します。2つの値を取ります。1つはx軸用、もう1つはy軸用です。あなたの場合、それは次のようになります：

background-position: 0 Y;ここで、Yはナビゲーションバーの高さです。

于 2012-07-10T12:54:30.467 に答える
1

パーティーに遅れましたが、この回答のおかげで、ページを希望どおりに表示できました。これが私のCSSコードです。仲間の初心者を助けることを望んで

header.masthead {

  position: relative;
  width: 100%;
  min-height: auto;
  text-align: center;
  color: white;
  background-image: url("../img/testimage5.jpg");
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media (max-width: 992px) {
  header.masthead {

    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    background-image: url("../img/testimage5.jpg");
    background-position: 0 20px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
  }
}
于 2017-11-12T11:55:02.840 に答える
0

www.builtwithbootstrap.comブログで例を確認しましたが、この人はこれを使用しているようです： www.1in5photo.com

body {
position: relative;
padding-top: 20px;
background-color: black;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}
于 2012-07-10T12:52:04.583 に答える