CSS Sprites简介和优缺陷

2021-03-14 05:16 jianzhan

CSS Sprites简介

一般被意译为“CSS图象拼合”或“CSS贴图精准定位”。CSS Sprites其实不是1门新技术应用,现阶段它早已在网页页面开发设计中发展趋势得较为完善,阿里巴巴巴巴各子企业的网页页面中四处都可以发现css sprites 的身影。但CSS Sprites其实不是甚么金科玉律,但在许多状况下,它拥有1定的优点,最关键的是它能够减轻服务器的负载,提升网页页面载入速率。伴随着Web设计方案向着精美、恰当的方位发展趋势,设计方案师们刚开始考虑到应用非Javascript的方 式制做电脑鼠标滑过、悬停菜单的实际效果,这时候CSS Sprite应运而生。

简言之,CSS Sprites实际上便是把网页页面中1些情况照片整合到1张照片文档中,再运用CSS的“background-image”,“background- repeat”,“background-position”的组成开展情况精准定位,background-position能够用数据能精准的精准定位出情况照片的部位。

当网页页面载入时,并不是载入每一个独立照片,而是1次载入全部组成照片。这是1个伟大的改善,它大大降低了HTTP恳求的次数,减轻服务器工作压力,另外减少了悬停载入照片所必须的時间延迟时间,使实际效果更顺畅,不容易间断。

CSS Sprites运用

在这层面,淘宝网做的较为好,我就以淘宝网为例吧。

案例1:淘宝频道网页页面导航栏

实际效果图:


点一下变大

sprites图:

   
   

上1页12 下1页 阅读文章全文