Question

In this image，如何摆脱创建CSS标头时自动显示的灰色背景？

.header {
        padding: 60px;
        margin: 20px auto auto auto;
        width: 1400px;
        border-radius: 10px;
        text-align: center;
        background: #1abc9c;
        color: white;
      }
      
      body {
        background: #f2f2f2;
      }

      .search {
        width: 100%;

        position: relative;
        display: flex;
      }

      .searchTerm {
        width: 4500px;
        border: 3px solid #1abc9c;
        border-right: none;
        padding: 5px;
        height: 50px;
        border-radius: 5px 0 0 5px;
        outline: none;
        color: #fff;
      }

      .searchTerm:focus {
        color: black;
      }

      .searchButton {
        width: 50px;
        height: 50px;
        border: 1px solid #1abc9c;
        background: #1abc9c;
        text-align: center;
        color: #fff;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        font-size: 20px;
      }

      /*Resize the wrap to see the search bar change!*/
      .wrap {
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 900px;
        margin: auto;
      }

<div class="header">
      <h1 style="font-size: 100px;">HI</h1>
      <p style="font-size: 30px;">
        Hello
      </p>
    </div>
    <div class="wrap">
      <div class="search">
        <input type="text" class="searchTerm" id="input_text" />
        <button type="submit" class="searchButton" onclick="send_text()">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
    <div class="search"></div>

谢谢！

添加此CSS和HTML时，我开始在标题周围得到灰色背景。但是，当我注释掉搜索栏的代码时，标题没有灰色背景。

Answer 1

请注意html具有.header类
尝试更改.header的背景颜色，看看会发生什么情况
尝试设置主体的背景颜色，看看会发生什么

Answer 2

原因是因为您正在css中使用它，它正在html中创建greyish背景：

body {
  background: #f2f2f2;
}

摆脱CSS中的灰色背景

2 个答案: