在HTML中为背景添加徽标

问题描述：

我正在尝试在我的页面中放置徽标，该徽标已具有背景。该徽标为.png格式，因此它具有一些透明区域，但使用我的代码时，这些区域显示为白色。我现在是超级noob，所以这就是为什么我不可能实现这一点。在HTML中为背景添加徽标

这是我的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）。

我试图风格，名称为“标志”的DIV这样：

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

，但使用的标识干脆消失。我也尝试使用属性z-index没有任何结果。

感谢

不知道我理解你的问题。图像正确显示给我。你在问为什么它不是集中？ – trav

你能上传你的标志吗？ –

答

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

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

你确定你保存你透明的PNG？

你能提供一个链接吗？

答

你确定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; 

}

在HTML中为背景添加徽标

相关推荐