Question

我有一个基于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检查工具（网络标签），然后加载了图片。

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

Answer 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;

Answer 2

我设法找到答案。出于某种原因，在移动设备上，您需要添加背景大小：100％;

Answer 3

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

Answer 4

..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%;
}

使用背景尺寸100％100％调整移动设备中的全屏宽度高度

Answer 5

对我来说是这样的：

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

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

5 个答案: