html - 如何使图像适合 css 中的按钮？

Question

我在我的网站上创建了两个按钮，我计划在您将鼠标悬停在它们上方时将它们转换为图像。我遇到的问题是悬停后，图像不太适合框内(太大)。如何调整它的大小，以便在将鼠标悬停在它们上方时它能正确地放入框内？

这是 HTML:

<a href="link.html">
<div class="main-button">
<h2 class="main-text">Maintenance</h2>  
</div></a>


<a href="link2.html">
<div class="docs-button">   
<h4 class="docs-text">Other Documents</h4>  
</div></a>

和CSS:

.main-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #0099DF;
margin-left:100px;
float:left;
}

.main-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:40px;
margin-top:150px;
}

.docs-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #545454;
margin-right:100px;
position:fixed; 
right:30%;
float:center;
}

.docs-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:60px;
margin-top:120px;
}

.main-button:hover {
background-image:url('../images/settings.png');


}

.docs-button:hover {
background-image:url('../images/documents.png');
}

Answer 1

尝试 background-size:cover - 例如

.main-button:hover {
    background-image:url('http://placekitten.com/200/300');
    background-size:cover;
}

.docs-button:hover {
    background-image:url('http://placekitten.com/g/200/300');
    background-size:cover;
}