首页 >> 秀友百科词条 >> 网络工具软件 >> 精灵技术

精灵技术[编辑]


概述
为了有效地减小服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites ,CSS雪碧)

精灵技术使用的核心

首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

首先测量所需图片在整张精灵图上的为值,测量为X轴方向,Y轴方向。
使用background将精灵引入,并且确定好位置。
因为以左上角X,Y的0点,所以X,Y轴的距离均使用负值。

css中滑动门

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,但是文字不一样长,所需要的背景也不一样长,这样就会出现一些问题。

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

 

参考资料: --------------------- 作者:courageFei 来源:CSDN 原文:https://blog.csdn.net/qq_36647038/article/details/
扩展阅读: 在制作网页的过程中我们会用很多个细碎的小图,每当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 由于网页中细碎的小图片很多,会导致向服务器发送N多次请求,这样不仅降低了页面的加载速度,也会影响服务器的效率。 **为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。 聪明机智的前辈们研究出了CSS精灵技术(也称CSS Sprites、CSS雪碧)。 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。需要用到background-img属性,background-position属性,当然也可以连写起来,都写在background属性中。
相关词条:
合作编辑: 王傅凯 

秀友百科词条内容均由网友提供,仅供参考。如发现词条内容有问题,请联系管理员。

词条信息

浏览次数:0

编辑次数:0历史版本

创建者: 王傅凯

最近更新:2018/12/11 0:52:08

关于秀友百科| 版权声明| 联系方式| 常见问题

秀友百科是网络营销能力秀指定的教学实践平台

深圳市竞争力科技有限公司版权所有