图像尺寸对于按钮来说太大...有什么提示吗？

Question

按钮浅灰色的是按钮。我的 html 按钮有这个 css：

.link-container button {
    background-color: #444;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    background-image: url(imgs/openbutton.png);
}

这是按钮的 html 代码：

        <button onclick="window.location.href='https://example.com/link2';"></button>

主要问题是，它太大了。

我在网上搜索了解决方案，没有找到任何东西，我很高兴它能缩小并适合......

Answer 1

尝试一下，下面的 CSS 代码...

.link-container button {
    background-color: #444;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    background-image: url('imgs/openbutton.png');
    background-size: contain; /* Makes the image fit within the button */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image within the button */
}