css背景图 手机app |scss eclipse

通过使用CSS中background属性的url值可以设置背景图像，下面是应用于手机App中的示例代码：

body {
background-image: url("background.png");
background-repeat: no-repeat;
background-size: cover;
}

上述代码意为将页面的背景图像设置为background.png图片，并设置不重复平铺，充满整个页面。

为了使背景图更适应移动设备，还需要在CSS文件中添加如下代码：

@media screen and (max-width: 768px) {
body {
background-size: contain;
}
}

上述代码意为如果当前设备的屏幕宽度小于768px，则将背景图像按比例缩小，完整展现在屏幕中。

除了背景图像，还可以通过CSS在页面中使用icon（图标），例如在应用程序的导航栏中使用图标来代表不同的页面。下面是应用于手机App中的示例代码：

.nav-icon {
background-image: url("icon.png");
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 30px;
}

上述代码意为将.nav-icon元素的背景图像设置为icon.png图片，并设置不重复平铺，按比例缩小至适应元素大小，同时将元素的宽度和高度均设置为30px。

通过使用CSS背景图和图标，可以使手机App的设计更加精致、简洁，提升用户体验。