CSSの画像のバックグラウンドを削除

Question

ロゴがありますが、ロゴは矩形または平らではありません。私は画像の背景を削除しました。しかし、私はCSSでクラスを記述しようとすると、クラス自体が正方形または四角形になるので、背景を白く表示します。

.logo1{ 
 
\t max-height: 100%; 
 
\t max-width: 100%; 
 
\t width:150px; 
 
\t height:150px; 
 
\t background-size: cover; 
 
\t background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png'); 
 
\t float: left; 
 
}

<div class="logo1"> </div>

今の背景が白なので、それが正しい感じています。しかし、背景色が何か他のものである場合、画像の周りに四角い白いボックスが表示されます。私はそのロゴの周りの白い四角形を取り除きたい。

Answer 1

ここは格好良いです。イメージは、使用している背景の形がpngで、背景が透明であることを確認してください。

body {background: #ff0;} 
 
.logo1{ 
 
\t max-height: 100%; 
 
\t max-width: 100%; 
 
\t width:150px; 
 
\t height:150px; 
 
\t background-size: cover; 
 
\t background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png'); 
 
\t float: left; 
 
}

<div class="logo1"> </div>

Answer 2

は、背景色を設定してみてください：それが動作するかどうか

background-color: rgba(0,0,0,0); 

OR

background-color: transparent; 

を参照してください。

Answer 3

背景透明はあなたが探しているものです。

body { 
 
    background: orange; 
 
} 
 

 
.logo1 { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 1px solid; 
 
    background: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png') no-repeat scroll center center transparent; 
 
    background-size: cover; 
 
    float: left; 
 
}

<div class="logo1"> </div>