Question

我的标题行为蓝色，内容框为白色，背景为浅蓝色。当我尝试将没有背景的.png徽标添加到标题中时，它的背景插入我的页面背景而不是标题行颜色。它显示如下：指数：

<body>
      <div id="header_tip"></div>
      <header>
          <h1 id="logo">
              <img src="logo.png"/>
          </h1>
      </header>
      <div id="content">


      </div>

</body>

的CSS：

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
  background-color: #e8fdff;
}

#header_tip {
    height: 15px;
    margin: 10px 5% 0% 5%;
    background-color: white;
    box-shadow: 1px 0px 5px #2c868e;
}
header {
    height: 90px;
    background-color: rgb(44, 134, 142);
    position: fixed;
    width: 100%;
    overflow: hidden;

    left: 0;
    z-index: 999;

    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

header.smaller {
    height: 40px;
}

#content {
    height: 1500px;
    float: center;
    margin: 0px 5% 15px 5%;
    background-color: white;
    box-shadow: 1px 1px 5px #2c868e;
}
#header_tip.smaller {
    background-color: black;
    margin: 0px;
    height: 0px;
}

我正在使用这个脚本调整大小并在滚动时跟随

Answer 1

这是因为您在此规则中对每个元素应用浅蓝色背景：

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
  background-color: #e8fdff;
}

*选择器意味着任何元素，因此这将应用于您的PNG图像，并且由于Alpha透明度而显示背景颜色。

将规则分成两个更合适的规则，例如：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #e8fdff;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  word-spacing: -2px;
}

瞧。 Fiddle here

图像一直透明到背景但不是标题颜色

1 个答案: