html - 背景图像缩放代码破坏 html 放置

Question

我正在使用 bootstrap，我希望我的背景图像随页面缩放，所以这是我使用的样式代码:

html,
body {
  background: url(../imgs/ryze.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

它似乎有效，但它弄乱了我的 html 位置，应该是这样的: Proper palcement(using template)

取而代之的是 html 像这样聚集在顶部: What I get instead *

编辑这是我使用的 html:

<div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">Cover</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">Who Are We</a></li>
                  <li><a href="#contact">News and Events</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Ryze Vodka</a></li>
                      <li><a href="#">Inferno Whiskey</a></li>
                      <li><a href="#">Bourbon on Oak</a></li>
                      <li role="separator" class="divider"></li>
                      <li class="dropdown-header">Seasonal</li>
                      <li><a href="#">Liquid Candycane</a></li>
                      <li><a href="#">Locktenders' Gin</a></li>

                    </ul>
                  </li>
                  <li><a href="#contact">Contact</a></li>
                  <li> <a href="#">Where to Buy? </a></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="inner cover" id="ryze">
            <h1 class="cover-heading">Ryze Vodka</h1>
            <p class="lead">Our Ryze Vodka is made from locally grown winter wheat and rye, and is distilled three times through volcanic ash and active carbon for a smooth and clean finish</p>

          </div>

          <div class="mastfoot">
            <div class="inner">
              <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
          </div>

        </div>

      </div>

    </div>

这是顶部的 html，所有类都来自 bootsrap 模板。希望对您有所帮助

Answer 1

这是解决该问题的方法。拉起页面并打开 Developer Tools 控制台(按 cnrtl + shift + i)。突出显示行为不当的元素，Chrome 会向您显示它的位置 + 填充 + 边距。

您可以在开发工具中修改 CSS 以实时查看更改/修复。希望这会有所帮助。