如何让css在移动设备上显示图像，而不是在桌面上显示

要让CSS在移动设备上显示图像，而不是在桌面上显示，可以使用CSS媒体查询和响应式设计的技术。

首先，可以使用媒体查询来检测设备的类型和屏幕宽度，并根据条件应用不同的CSS样式。通过设置适当的CSS规则，可以针对移动设备和桌面设备进行不同的图像显示。

例如，可以在CSS中使用以下媒体查询和样式规则来实现移动设备上的图像显示：

/* 默认的桌面样式 */
.image {
  display: none; /* 在桌面设备上隐藏图像 */
}

/* 移动设备的样式 */
@media only screen and (max-width: 600px) {
  .image {
    display: block; /* 在移动设备上显示图像 */
  }
}

在上述例子中，image类被设置为在桌面设备上隐藏图像，而在屏幕宽度小于或等于600像素（移动设备）时显示图像。

另外，如果想要更灵活地控制图像的显示，可以使用CSS背景图像属性（background-image）以及相关属性来实现。

例如，可以在CSS中使用以下样式规则来实现在移动设备上显示背景图像：

/* 默认的桌面样式 */
.image {
  background-image: none; /* 在桌面设备上移除背景图像 */
}

/* 移动设备的样式 */
@media only screen and (max-width: 600px) {
  .image {
    background-image: url('mobile-image.jpg'); /* 在移动设备上设置背景图像 */
  }
}

这样，在移动设备上，.image类将显示设置的背景图像（mobile-image.jpg），而在桌面设备上不显示背景图像。

以上是通过使用CSS媒体查询和响应式设计的基本方法来在移动设备上显示图像。根据具体需求，还可以结合其他CSS技术来进一步优化和定制图像显示效果。

请注意，本回答提供的是一种通用的方法，对应用程序和网站来说可能有更多复杂的需求。针对特定的应用场景，可以进一步研究和实践以获得更好的结果。

推荐的腾讯云相关产品和产品介绍链接地址：