在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沒有任何結果。

感謝

來源

2017-08-04 giovandrea

不知道我理解你的問題。圖像正確顯示給我。你在問爲什麼它不是集中？ – trav

你能上傳你的標誌嗎？ –

首先，你需要一個正斜槓爲您的圖片路徑：

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

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

你能提供一個鏈接嗎？

來源

2017-08-04 13:37:00

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

}

來源

2017-08-04 13:46:34

在HTML中爲背景添加徽標

回答

相關問題