Question

我尝试使用背景图片创建响应式标头。当我添加off-canvass菜单汉堡包图标时，我会在视口顶部显示一条身体背景。

我做错了什么？

＆＃13;

  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
  }

＆＃13;

<!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>

＆＃13;

Answer 1

我认为问题已经解决了，看看

＆＃13;

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
  }

＆＃13;

<!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>

＆＃13;

与背景图象的敏感倒栽跳水菜单

1 个答案: