Question

我有<input type = "button" id = "enterButton"/>并使用下面的代码进行装饰。但是图像周围出现了灰色方块。无论如何要删除它吗？

#enterButton{
    width: 45px;  
    min-width: 45px;
    min-height: 45px;
    margin-left: 3%;
    background-image: url("../img/logo3.png");
    background-repeat: no-repeat;
    border: none;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    -moz-background-size: 100%;
    -ms-background-size: 100%;
    -khtml-background-size: 100%;
    background-size: 100%
}

Answer 1

您可以添加：

background: transparent;

或您想要使用的任何颜色。

Answer 2

您只需更改背景颜色设置：

background-color:white;

或红色或蓝色或透明......无论你需要它。

DEMO

Answer 3

尝试添加：

background-color: transparent;

到您的CSS。

Answer 4

如果您添加background-color: transparent;，则会解决此问题

#enterButton{
width: 45px;  
min-width: 45px;
min-height: 45px;
margin-left: 3%;
background-image: url("../img/logo3.png");
background-repeat: no-repeat;
border: none;
-webkit-background-size: 100%;
-o-background-size: 100%;
-moz-background-size: 100%;
-ms-background-size: 100%;
-khtml-background-size: 100%;
background-size: 100%;
background-color: transparent; /* ADD THIS */
}

要使按钮悬停，请将其添加到CSS

中

#enterButton:hover {
background-color: #ff0000;
}

Answer 5

将此添加到CSS文件或使用嵌入式CSS

background:transparent;
border:none;

如何删除按钮周围的框？

5 个答案: