Question

我试图通过按钮的 css 插入图像，但由于某种原因它显示为平铺图像。为什么会发生这种情况，如何修复它以使其成为单个图像？

<button id="myImg" type="button" style="
    background:url(https://picsum.photos/200);
    position: fixed; 
    z-index:11; 
    cursor:pointer;
    border:none;
    width:50%;
    height:50%;
    display: block; 
    ">

Answer 1

我不知道这是 css 的事情，我们必须在添加图像后添加背景，不要重复。

background-repeat: no-repeat;

Answer 2

使用 background-repeat: no-repeat;

无法完全解决您的问题

您只需要添加 background-size: cover; 以便图像覆盖整个按钮空间。

稍后谢谢我。

<button id="myImg" type="button" style="
    background:url(https://picsum.photos/200);
    background-size: cover;
    background-position: 50% 70%;
    position: fixed; 
    z-index:11; 
    cursor:pointer;
    border:none;
    width:50%;
    height:50%;
    display: block; 
    ">

图像按钮显示为平铺

2 个答案: