在 HTML 中将徽标添加到背景答案

【问题标题】：Adding a logo to a background in HTML在 HTML 中将徽标添加到背景
【发布时间】：2018-01-12 11:17:41
【问题描述】：

我正在尝试在我的页面中放置一个徽标，该页面已经有背景。徽标采用 .png 格式，因此它有一些透明区域，但在我的代码中，这些区域显示为白色。我现在是超级菜鸟，所以这就是我可能无法实现这一目标的原因。

这是我的 HTML 文件：

<body>
    <div class="logo">
          <img src="img/logo.png" class="center">
    </div>

    <div class="form"> 
          .... 
    </div>

</body>

虽然这是我的 CSS：

img.center {
  float: left;
  height: 150px;
  width: 520px;
  box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
  opacity: 0.7;
}

body {
    font-family: Helvetica;
    background: url("img/background.jpg");
    background-size:cover;
 }

使用上面的代码，我在左上角有徽标，但没有透明位，它有白色（就像你将 .png 图像保存为 .jpg）。

我试图以这种方式为名称为“logo”的 div 设置样式：

div.logo {
    background-image: url("img\logo.png");
    float: left;
    height: 150px;
    width: 520px;    
    }

但是使用它，徽标就会消失。我也尝试使用属性 z-index 没有任何结果。

谢谢

【问题讨论】：

不确定我是否理解您的问题。图像对我来说正确显示。您是在问为什么它不居中？
你能上传你的标志吗？

标签： html css image background png

【解决方案1】：

首先，您的图像路径需要一个正斜杠：

div.logo {
    background-image: url("img/logo.png");
    float: left;
    height: 150px;
    width: 520px;    
}

您确定您保存的 .png 具有透明度吗？

你能提供一个链接吗？

【讨论】：

【解决方案2】：

您确定 PNG 徽标具有透明背景吗？在我的 jsfiddle 示例中，使用相同的值我没有问题。

JSFiddle example

   <div class="logo">
          <img src="http://dragonkimfoundation.org/wp-content/uploads/2016/09/Dragon-Logo.png" class="center">
    </div>

    <div class="form"> 
          .... 
    </div>


    img.center {
      float: left;
      height: 150px;
      width: 520px;
      box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
      opacity: 0.7;
    }

body {
    font-family: Helvetica;
    background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFyEmWRW1cjDqI_rQ4aqZ8eFOB3Sq2z7NUNnUkm7YMJxpLv7WO");
    background-size:cover;
    background-color:orange;

 }

【讨论】：