background-image 在桌面浏览器上正确显示，在移动浏览器上不显示答案

【问题标题】：background-image shows correctly on desktop browsers, not shown on mobile browsersbackground-image 在桌面浏览器上正确显示，在移动浏览器上不显示
【发布时间】：2021-03-26 22:39:19
【问题描述】：

我有一个基于 jquery mobile 的系统。我在搜索文本框上添加了一个重置搜索文本框值的符号。

.ui-input-search .ui-icon-delete {
    border-radius: 0px;
    background-image: url(images/close-disable.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    box-shadow: none;
    background-color: transparent;
    z-index: 90000;
}

我通过移动设备上的 Chrome 检查工具（网络选项卡）进行了检查，图像已加载。

通过桌面访问时，其显示正确。仅在移动设备上不起作用（我在多个浏览器上尝试过，在任何浏览器上都不起作用）

【问题讨论】：

标签： css html jquery-mobile

【解决方案1】：

这可能是由于使用操作系统的本机显示设置输入控件引起的冲突，请尝试将appearance属性显式设置为none（see here）

.ui-input-search .ui-icon-delete {
    border-radius: 0px;
    background-image: url(images/close-disable.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    box-shadow: none;
    background-color: transparent;
    z-index: 90000;
    -moz-appearace:none;
    -webkit-appearace:none;
    appearace:none;
}

或者，尝试：

background-image: url(images/close-disable.png)!important;

【讨论】：

【解决方案2】：

我设法找到了答案。出于某种原因，在移动设备上，您需要添加 background-size: 100%;

【讨论】：

【解决方案3】：

..ui-input-search .ui-icon-delete{
  background: url("../assets/lotus.png") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  background-attachment: scroll;
  background-size: 100% 100%;
}

在移动端使用 background-size 100% 100% 调整全屏宽度高度

【讨论】：

【解决方案4】：

对我来说是这样的：

.ui-input-search .ui-icon-delete { 
   background-image: url(images/close-disable.png)!important;
   background-size: 100% 100%;
}

【讨论】：

【解决方案5】：

我之前遇到过这个问题，我注意到这只是一个文件权限问题。我通过 FTP 访问我的服务器来纠正这个问题，右键单击图像文件，转到“文件权限”选项并设置“777”权限：D

【讨论】：