html - 如何使背景图像和图像上的内容具有响应性，尤其是在内容很大的情况下

Question

我在背景中有一个图像，在图像上有一些按钮。我的图像通过包含一些样式变得响应式，但图像上方的内容导致图像自身重复。

HTML:

<header class="mainheader" style="background-image:url(home.jpg);height:864px;">
  <!--  -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:white">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- <a class="navbar-brand" href="#">Ristorante Con Fusion</a> -->
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" style="color:#FFFFFF">Pricing</a></li>
      <li><a href="#" style="color:#FFFFFF">Contact Us</a></li>
      <li><a href="#" style="color:#EC5297;">Login</a></li>
      <li>
        <button type="button" class="btn btn-default navbar-btn seeit">See it in Action</button>
      </li>
      <li>
        <button type="button" class="btn navbar-btn signp">Signup for FREE</button>
      </li>
    </ul>
  </div>
  <!--line-->
  <hr class="line">
  <div class="container">
    <!--responsive karna hain-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4 twobutton">
        <button type="button" class="btn navbar-btn one" style="width:130px;">Signup for FREE</button>
        <p>
          <button type="button" class="btn btn-default navbar-btn two" style="width:130px;">See it in Action</button>
        </p>
      </div>
    </div>
    <!--for-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4 for">
        <p>For</p>
      </div>
    </div>
    <!--buttons-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4" style="margin-left: 35em;">
        <img src="quvunew - Light [Recovered].png" class="img-responsive">
      </div>
    </div>
    <!--content-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4 content">
        <p style="color:#FFFFFF;">Send notifications to your users, even when they're not on your website Implement Chrome & Firefox Push Notifications on any Website in 5 mins
        </p>
      </div>
    </div>
    <!--content-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4 imagetwo">
        <img src="content.png">
      </div>
    </div>
    <!--signup-->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-4 signup">
        <button type="button" class="btn navbar-btn   one" style="width:226px;">Signup for FREE</button>
      </div>
    </div>
  </div>
  <!--header image close-->
</header>

CSS:

.mainheader {
  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% auto;
}

#rightnav {}

.seeit {
  background-color: Transparent;
  color: white;
  width: 166 px;
  height: 35 px;
}

.signp {
  background-color: #766DCC;
  color: white;
}

.line {
  color: #457AA9;
}

.twobutton {
  margin-top: 300px;
  margin-left: 100px;
}

.one {
  background-color: #766DCC;
}

.two {
  background-color: Transparent;
  color: white;
}

.for {
  margin-top: 5em;
  margin-left: 41em;
  color: #FFFFFF;
}

.centerimg {
  /*margin-left: 12em;*/
}

.content {
  margin-top: 2em;
}

.imagetwo {
  margin-top: 3em;
}

.signup {
  margin-top: 2em;
}

.backgroundimage {
  background-size: cover;
  height: 1400px;
  width: 1280px;
  background-position: center;
}

Answer 1

这里:

.mainheader {
  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% auto;
}

第一行缺少一些东西:这些设置的参数。从 HTML 中的 header 标签中移除 background-image 属性并将其放入 CSS 中:

.mainheader {
  background: url(home.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

然后您的 header 标签应该是:

<header class="mainheader" style="height:864px;">

或者更好的是将该高度设置从样式属性移动到 CSS 规则...

补充:实际上 background-size: 100% auto; 应该是 background-size: cover;，如果你想让它表现得像你列出的前缀设置在那之前。 (我在上面更改了)