Question

当我压缩我的页面时，我有这个按钮（木头）：

点击此按钮后会出现一些白色阴影：

当我点击并按下按钮时，它就像灰色阴影：

如何删除此阴影？

.btn-enter {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;

}
.btn-enter:hover {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;
}
.btn-enter:active {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:50%;
    height: 20%;
    border:none;
    background-color:none;
}

<button type="button" class="btn btn-default btn-enter"></button>

Answer 1

你可以使用outline：0;

.btn-enter {
    background: url('http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg') no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;
   outline:0;
}
.btn-enter:hover {
    background: url(http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;

}
.btn-enter:active {
    background: url(http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:50%;
    height: 20%;
    border:none;
    background-color:none;
}

如何摆脱PNG按钮的白色阴影

1 个答案: