按钮 img 不显示

Question

抱歉我的初学者问题。我的图像没有显示，但我不知道为什么。我也尝试过 'background-position: center;' 和 'px' 值。如果我删除 'no-repeate'，我可以看到我的图像的唯一方法是它用成百上千的箭头填满我的盒子。有什么建议吗？我只需要在框的中央显示一次图像。

<input id = "leftBigArrow" type="button">

#leftBigArrow {
    width: 20px;
    height: 400px;
    cursor: pointer;
    border: none;
    background-image: url('images/arrow.svg') no-repeat;
    padding: 0;
}

Answer 1

尝试添加此属性。

#leftBigArrow {
 background-position : center;
 background-attachment : fixed;
}

Answer 2

你必须用

分别定义no-repeat和url('images/arrow.svg')

background-image: url('images/arrow.svg');
background-repeat: no-repeat;

或者您可以使用 shorthand:

background: url('images/arrow.svg') no-repeat;

工作示例：

#leftBigArrow {
    width: 20px;
    height: 400px;
    cursor: pointer;
    border: none;
    background-image: url('https://picsum.photos/50');
    background-repeat: no-repeat;
    padding: 0;
}

<input id="leftBigArrow" type="button">

按钮 img 不显示

button img not showing

css

image

button

position