Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

这里看起来不错。确保图像采用png格式，您正在使用它并且背景透明。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

背景透明是您正在寻找的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试设置背景颜色：

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

OR

background-color: transparent;

看看是否有效。

在Css中删除图像的背景

3 个答案: