0

我正在尝试使用背景图像创建响应式标题。当我添加画布外菜单汉堡图标时，我会在视口顶部显示一条身体背景。

我究竟做错了什么？

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    background: red;
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
  }
  .toggle {
    position: absolute;
    right: 0.15em;
    cursor: pointer;
    color: white
  }
  .wrapper {
    max-width: 78.75em;
    margin: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  .container {
    background: yellow;
    min-height: 100%;
    padding: 0;
    margin: 0
  }
  #header label {
    padding: 0 0.125em;
    font: 2.875em/1.4375em Arial
  }
  #header label:hover,
  #menu label:hover {
    color: grey
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>

<body>
  <!-- red -->
  <div class="wrapper">
    <div id="menu">
    </div>
    <!-- closing "#menu" -->
    <div class="container">
      <!-- yellow -->
      <div id="header">
        <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
        <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label>
      </div>
      <!-- closing "#header" -->

      <h1>Test header 4</strong></h1>
      <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>

    </div>
    <!-- closing ".container" -->
  </div>
  <!-- closing ".wrapper" -->
</body>

</html>

4

1 回答 1

0

我想问题解决了，看看

html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    background: red;
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
  }
  .toggle {
    position: absolute;
    right: 0.15em;
    cursor: pointer;
    color: white
  }
  .wrapper {
    max-width: 78.75em;
    margin: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
  }
  .container {
    background: yellow;
    min-height: 100%;
    padding: 0;
    margin: 0
  }
  #header label {
    padding: 0 0.125em;
    font: 2.875em/1.4375em Arial
  }
  #header label:hover,
  #menu label:hover {
    color: grey
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>

<body>
  <!-- red -->
  <div class="wrapper">
    <div id="menu">
    </div>
    <!-- closing "#menu" -->
    <div class="container">
      <!-- yellow -->
      <div id="header">
        <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg"  style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
        <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label>
      </div>
      <!-- closing "#header" -->

      <h1>Test header 4</strong></h1>
      <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>

    </div>
    <!-- closing ".container" -->
  </div>
  <!-- closing ".wrapper" -->
</body>

</html>

于 2015-09-13T07:55:08.870 回答