手机网站建设CSS Sprites原理
日期 : 2020-12-12 21:05:32
CSS Sprites原理。CSS Sprites基本思路是首先把网页中需要用到的大小一致、背景透明等特性的小图片整合到一张图片文件中。
然后再利用background-image、background-repeat、background-position或者background等CSS属性进行背景定位，其中background-image属性用于设置元素背景图片地址，background-repeat属性用于设置背景图片是否平铺，background-position属性用于定位背景图片的坐标原点位置，最后通过引用CSS样式，使整合图片中不同位置的小图片以背景的形式显示在元素内。
由于整合图片的总体面貌没有发生变化，只是调整了图片的显示区域。就好比打码机中雕刻字带上的数字，可以根据需要灵活调整当前打印的数字，其它非当前数字只是被移动了位置。当多个大小相同的元素引用同一个背景图时，只需要从服务器下载一次背景图片文件，然后再通过background-position属性从背景图片中定位选取需要显示的那一部分背景图，降低了浏览器向服务器的请求次数，提高了网页的加载速度。
然后再利用background-image、background-repeat、background-position或者background等CSS属性进行背景定位，其中background-image属性用于设置元素背景图片地址，background-repeat属性用于设置背景图片是否平铺，background-position属性用于定位背景图片的坐标原点位置，最后通过引用CSS样式，使整合图片中不同位置的小图片以背景的形式显示在元素内。
由于整合图片的总体面貌没有发生变化，只是调整了图片的显示区域。就好比打码机中雕刻字带上的数字，可以根据需要灵活调整当前打印的数字，其它非当前数字只是被移动了位置。当多个大小相同的元素引用同一个背景图时，只需要从服务器下载一次背景图片文件，然后再通过background-position属性从背景图片中定位选取需要显示的那一部分背景图，降低了浏览器向服务器的请求次数，提高了网页的加载速度。
上一篇：手机网站建设封面型
下一篇：手机网站建设跨平台、开发便捷
相关文章
精彩导读
热门资讯
