欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例

企业模板

p css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术课程篇与css sprites实例篇

css sprites是什么通俗讲解:

CSS Sprites其实就是把网页中一些背景图片整理

拼合成一张图片中

,再借助DIV CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象地方。

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
css sprites拼合背景图片素材达成布局成效截图

1、啥是css sprites - TOP

css sprites直译过来就是

CSS精灵

。一般被讲解为“

CSS图像拼合

”或“

CSS贴图定位

”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术方法布局网页背景。如此做有哪些好处也是显而易见的,由于图片多的话,会增加http的请求,无疑促进了网站性能的减低,尤其是图片特别多的网站,假如可以用css sprites减少图片数目,带来的将是速度的提高。

2、合适与不合适DIV CSS sprites拼合布局 - TOP

2、不合适:大图大背景
大背景通常用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,互联网带宽不好的访问者访问时因为背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来用css sprites背景定位布局。

1、合适:通常小图标素材
小的图标ico类素材,通常图标非常小十多像素几十像素的宽度高度,这种合适拼合成一张图达成sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数,但非常快加载完又会释放。


2、sprites缺点
在图片合并的时候,你要把多张图片有序的适当的合并成一张图片,还要留好只够的空间,预防板块内不会出现非必须的背景,假如留空间或拼合地方不适合,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的状况;

3、sprites合适推荐小结
通常此sprites拼合布局用于局部小盒子布局不合适大背景大布局背景用。譬如小局部布局小图标背景、小导航背景等DIVCSS布局。

3、p css sprites优势与缺点劣势判断选择 - TOP

1、sprites优势:
若干小图标拼合成一张图后布局,降低http iis请求数,对于大战大流量网站来讲隐形优势非常显然的,从而隐形地提高了网站性能。对于大流量网站来讲本来http请求数比较宝贵,用DIV+CSS Sprites如此可以大大的提升了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的重要原因,同时也降低图片文件数目。

CSS Sprites在维护的时候比较麻烦,sprites是通常双刃剑,假如页面背景有少许改动,通常就要改这张合并的图片,不需要改的地方最好不要动,如此防止改动更多的css,假如在原来的地方放不下,有只能(最好)往下加图片,如此图片的字节就增加了,由于每次的图片改动都得往这个图片删除或添加内容,看上去稍微繁琐,而且重新算图片的地方(特别是这种上千px的图)也是一件颇为不爽的事情

CSS Sprites在开发的时候比较麻烦,你要通过photoshop(PS)或其他工具测量计算每个背景单元的精确地方,这是针线活,没什么困难程度,但非常繁琐;

3、酱油妹推荐小结
犹豫拼接图片需要肯定经验方法(做实践即可迅速学会)、测量定位数值、修改不是那样灵活等缘由,通常小网站站、小流量网站、通常公司网站不是非常推荐用CSS Sprites,由于用CSS Sprites会比一般单个背景图片布局要耗浪费时间间和精力,所以不是非常推荐小站。但这个布局方法也需要要掌握学会灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐用,如此比较值得。

因为图片的地方需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

4、p css sprites实例示例课程 - TOP

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
拼合ico图标素材达成列表不同图标成效截图

1、素材与要达成成效截图

第一此列表布局大家用ul li列表布局,每一个li站一行排版,对ul设置padding达成四周内容与边框肯定间距成效,由于每一个li前面图标不同,但此背景图片是拼合在一张图片上,所以这里做li里开始用span标签达成这个不同图标成效,每一个图标不同为了不同span所以对span设置不同class,不同class对应设置定位相应的图标。

2、sprites实例课程讲解介绍
第一这部分图标素材是放在同一张图片上(PS拼合),然后达成成列表类布局,列表每一个前图标不同。用p css sprites达成此布局(其实用background样式达成)。

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
sprites案例图片素材(直接点击图片鼠标右键可以另存为保存用)

3、实例课程筹备
1)、初始化模板用:为了兼容各大浏览器,仍然这里用酱油妹提供初始化模板,在此模板基础上修改设置符合本实例CSS样式。
2)、图标素材,这里直接为大伙提供拼接好的图标素材图片一张,命名为“ico.png”,如下图,可直接另存为保存用。

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
未用sprites技术引入背景图片成效截图

4、先布局出成效,再css sprites设置不同背景图标样式
1)、重要html代码:

<ulclass="Sprites"><li><spanclass="a1"></span><ahref="#">WORD文章标题</a></li><li><spanclass="a2"></span><ahref="#">PPT内容标题</a></li><li><spanclass="a3"></span><ahref="#">Excel内容标题</a></li><li><spanclass="a4"></span><ahref="#">PDF内容标题</a></li><li><spanclass="a5"></span><ahref="#">文本文档标题</a></li></ul>

为了不同不同成效对span加入不同class。
2)、重要CSS代码

ul.Sprites{margin:0auto;border:1pxsolid#F00;width:300px;padding:10px;}ul.Spritesli{height:24px;font-size:14px;line-height:24px;text-align:left;overflow:hidden}ul.Spriteslispan{float:left;width:17px;padding-TOP:5px;height:17px;overflow:hidden;background:url(ico.png)no-repeat}ul.Spriteslia{padding-left:5px}

3)、成效截图

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
p css sprites案例成效截图

4)、用css sprites设置定位背景完整重要CSS代码

ul.Sprites{margin:0auto;border:1pxsolid#F00;width:300px;padding:10px;}ul.Spritesli{height:24px;font-size:14px;line-height:24px;text-align:left;overflow:hidden}ul.Spriteslispan{float:left;width:17px;padding-TOP:5px;height:17px;overflow:hidden;background:url(ico.png)no-repeat}ul.Spriteslia{padding-left:5px}ul.Spriteslispan.a1{background-position:-62px-32px}ul.Spriteslispan.a2{background-position:-86px-32px}ul.Spriteslispan.a3{background-position:-110px-32px}ul.Spriteslispan.a4{background-position:-133px-32px}ul.Spriteslispan.a5{background-position:-158px-32px}

最后达成浏览器成效测试成效图

重要:

背景background-position有两个数值,前一个代表靠左距离值(可为正可为负),第二个数值代表靠上距离值(可为正可为负)
背景background-position有两个数值可以为正可以为负,当为正数时,代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片;当为负数年代表背景图片作为盒子对象背景图片,将背景图片拖动超出盒子对象左侧多远,拖动超出盒子对象上边多远开始显示此背景图片。

5)、css sprites重要代码与讲解

ul.Spriteslispan.a1{background-position:-62px-32px}ul.Spriteslispan.a2{background-position:-86px-32px}ul.Spriteslispan.a3{background-position:-110px-32px}ul.Spriteslispan.a4{background-position:-133px-32px}ul.Spriteslispan.a5{background-position:-158px-32px}

第一对ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。
再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px,向上“拖动”32px开始显示此背景图标

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位课程案例
借助切片工具获得对应小图标在图片文件中地方

6)、背景图片定位数值获得
向左“拖动”,向上“拖动”这部分这PS获得图文课程

查询案例

通过ps软件借助切片工具画出要显示图片地区后,双击即可弹出“切片详细卡”,可以得到X(靠左距离值),Y(靠上距离值)即可获得对应图片素材在大图中地方。

5、在线样式与下载 - TOP

1、在线样式

立即下载(5.969KB)

2、打包下载

6、DIV CSS sprites方法技术概要 - TOP

CSS sprites其实就是对CSS背景background样式的扩展应用,以前设置背景background-position容易见到为正数值,设置背景靠左靠上距离多少像素开始显示图片,为负数值后,是将图片拖离左侧上边多少像素开始显示图片,下载本案例多次修改修改数值,察看察看能找到规律非常快就会作为此方法,同时掌握PS切片工具获得距离值。


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-05-16 22:00
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/CSS/CSSjichu/20210516/12671.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧