Question

我有一个button元素，但我希望在其中有一个图像。该图像已经在Photoshop中进行了设计。图片大小超出了按钮的大小，我想强迫它占据按钮的确切大小，以保持按钮元素的行为，但显示的是按钮上的图像。

我尝试将按钮元素的border-width，padding和overflow属性分别设置为0px和hidden。我还将图像的最大宽度属性设置为100％

<button class = "col-sm-5" style= "border-width: 0px; padding: 
 0px; overflow: hidden;">

    <img src= "photos/myImg.png" style= "max-width:100%;">

</button>

我希望没有任何类型的边框，但是图像和按钮之间会出现灰色边框。 Button/Image behavior screenshot

Answer 1

尝试一下

BUTTON {
    padding: 8px 8px 8px 32px;
    font-family: Arial, Verdana;   
    background: #f0f0f0 url([url or base 64 data]);
    background-position: 8px 8px;
    background-repeat: no-repeat;
}

如何强制按钮标签内的图像占据按钮的确切宽度和高度

1 个答案: