html - 为什么我在 Google Chrome 的导航栏中看到 Logo 的轮廓？

Question

我正在创建我的网站，我想在导航栏上添加一个日志。

index.html:

<header>
  <div class="header_logo">
    <img class="logo" value="logo"/>
  </div>
  <div>

  </div>
</header>

样式.css:

  .logo
  {
   background-image: url("../icons/car.png");
   border-style: none;
   position: absolute;
   left: 38px;
   top: 19px;
   width: 137px;
   height: 49px;
  }
  .header_logo 
  {
   background-color: #000000;
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 75px;
  }

标志是: car.png

但是当我测试该网站时，它在 Explorer 和 Firefox 上运行良好，但在 Chrome 上，我在 Logo 周围有一个白色轮廓，导航栏的背景是黑色的。 我该如何解决？

Answer 1

查看 PNG 文件。看起来它周围有一个白色边框。将图像替换为没有白色边框的图像，效果会很好。

改用这个文件 Car.png

编辑:在查看之后，Chrome 使用 img 标签的方式似乎存在问题。只需为它使用一个 div 标签。例如 HTML:

<header>
    <div class="header_logo">
        <div class="logo" value="logo"></div>
    </div>
    <div>

    </div>
</header>

对于 CSS:

.logo {
    background-image: url("../icons/car.png");
    border-style: none;
    position: absolute;
    left: 38px;
    top: 19px;
    width: 137px;
    height: 49px;
}
.header_logo {
    background-color: #000000;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 75px;
}

https://codepen.io/anon/pen/QpJbwy

如果你需要使用img标签，你必须有一个src属性。