Question

我做了一个图像按钮，将其悬停在图片之间。由于某种原因，当我将其设置为html时，图片周围会有一个框架。

我尝试将按钮更改为“ just”，然后奇怪的帧消失了，但是按钮上的按下效果不起作用。

.img {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/red2.png")no-repeat;
}
.img:hover {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/red1.png") no-repeat;
}

.img:active {
  background: url("src/assets/red1.png") no-repeat;
}
.img:focus {
  background: url("src/assets/red1.png") no-repeat;
}

.img:target {
  background: url("src/assets/red1.png") no-repeat;
}

<td>
 <button type=button (click)="" class="img"></button>
</td>

Answer 1

只需添加border:0;即可消除灰色边框，而如果要消除蓝色轮廓则只需添加outline: none;。

.img {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/redsmiley2.png")no-repeat;
  border: 0;
  outline: none;
}
.img:hover {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/redsmiley1.png") no-repeat;
}

.img:active {
  background: url("src/assets/redsmiley1.png") no-repeat;
}
.img:focus {
  background: url("src/assets/redsmiley1.png") no-repeat;
}

.img:target {
  background: url("src/assets/redsmiley1.png") no-repeat;
}

<td>
 <button type=button (click)="" class="img"></button>
</td>

Answer 2

尝试添加

.img{
    border:0;
}

还要确保

<td>

标签在表格中。

Answer 3

正如GolezTrol所说，这只是添加边框的按钮默认样式。

我在这些情况下使用的只是

.img {
border: none;
outline: none;
}

这将确保按钮在激活时没有边框，也没有轮廓。

图像按钮周围的怪异帧

3 个答案: