手机端css里面全是图片

在手机端的开发中，有很大一部分的CSS都是由图片来实现的。这种做法可能看起来有些不太好，但是它却有自己的优势，它可以帮助我们实现一些非常炫酷的效果。

.image {
     background: url('image1.png') no-repeat center center;
     width: 100%;
     height: 200px;
     background-size: cover;
 }

比如说，我们可以使用一个单一的图片来实现一个完整的背景，这样可以极大地减小网页的请求次数，从而加快网页的加载速度。

.navigation {
     background: url('image2.png') no-repeat center center;
     width: 100%;
     height: 50px;
     background-size: contain;
 }

另外，我们也可以使用一张图片来实现导航栏的效果，这样可以非常方便地设置导航的样式，比如在处理hover状态时，只需要改变图片的位置即可。

.button {
     background: url('image3.png') no-repeat center center;
     height: 50px;
     background-size: contain;
 }

我们还可以使用一张图片来实现按钮的效果，这样可以使按钮的样式更加炫酷。如果需要改变按钮的状态，只需要在图片中切换不同的图案即可。

.icon {
     background: url('image4.png') no-repeat center center;
     width: 30px;
     height: 30px;
     background-size: contain;
 }
    

最后，我们还可以使用一张图片来实现小图标的效果，这样可以使小图标的样式更加灵活多变，同时也可以避免在页面中出现很多小文件。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！