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

Question

我的标题行为蓝色，内容框为白色，背景为浅蓝色。 当我尝试将没有背景的.png徽标添加到页眉时，其背景会隐含我的页面背景，而不是页眉线条颜色。 它显示如下：index：

<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;
}

瞧 在这里摆弄

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-11 13:42:26

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-11 13:42:26

解决方案1
1 已采纳 2016-03-11 13:42:26