HTMLの背景にロゴを追加する

私は自分のページにロゴを入れようとしていますが、既に背景があります。ロゴは.png形式ですので透明なゾーンがいくつかありますが、私のコードではそのゾーンは白く見えます。私はその時点でメガノブですので、それが私がおそらくこれを達成できない理由です。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を使ってみました。 1については

出典

2017-08-04 giovandrea

ない私はあなたの質問を理解してください。イメージは私のために正しく表示されます。なぜそれがセンタリングしていないのか尋ねていますか？ – trav

ロゴをアップロードしてください。 –

おかげで、あなたのイメージパスのスラッシュを必要とする：あなたは、透明性とあなたの.pngを保存していることを確認してください

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

ていますか？

リンクを提供できますか？

出典

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の背景にロゴを追加する

答えて

関連する問題