在 Css 中删除图像的背景答案

【问题标题】：Remove the background of an image in Css在 Css 中删除图像的背景
【发布时间】：2021-10-27 22:53:17
【问题描述】：

我有一个不是矩形或正方形的徽标。我已经删除了图像的背景。但是当我尝试用 css 编写一个类时，它会将背景显示为白色，因为该类本身是正方形或矩形的。

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

&lt;div class="logo1"&gt; &lt;/div&gt;

现在背景是白色的，所以感觉是正确的。但是当背景颜色是其他颜色时，图像周围会显示一个方形的白色框。我想移除徽标周围的那个白色方形框。

【问题讨论】：

background-color: transparent
好吧，如果你的图像没有透明度，你就不能这样做......
页面的颜色是白色的，所以你看到的就是这个。尝试为body 设置背景颜色。
@Kiwad 是什么让您认为图像中没有透明度？
图片是透明的。我仍然无法做到。无论如何，现在它正在工作。

标签： html css image

【解决方案1】：

这里看起来不错。确保图像在您使用它的位置为png 格式并且背景透明。

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

&lt;div class="logo1"&gt; &lt;/div&gt;

【讨论】：

欢迎维克拉姆！很高兴，它有帮助。

【解决方案2】：

背景透明是你要找的。p>

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;
}

&lt;div class="logo1"&gt; &lt;/div&gt;

【讨论】：

【解决方案3】：

尝试设置背景颜色：

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

或

background-color: transparent;

看看这是否有效。

【讨论】：