目錄
一、什么是css sprites
二、适合与不适合CSS sprites拼合布局 
三、css sprites优势与缺点劣势判断选择
四、css sprites实例示例教程 
CSS sprites技巧技术总结 
首頁 web前端 html教學 css sprite实例_html/css_WEB-ITnose

css sprite实例_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。

一、什么是css sprites

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用csssprites降低图片数量,带来的将是速度的提升。

css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

 

二、适合与不适合CSS sprites拼合布局 

1、适合:一般小图标素材

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

2、不适合:大图大背景

大背景一般用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来使用css sprites背景定位布局。

3、sprites适合推荐小结

一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等CSS布局。

 

三、css sprites优势与缺点劣势判断选择

1、sprites优势:

若干小图标拼合成一张图后布局,减少http iis请求数,对于大战大流量网站来说隐形优势很显然的,从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵,使用CSS Sprites这样可以大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,同时也减少图片文件数目。


2、sprites缺点

在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;

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

CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情

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

3、推荐小结

由于拼接图片需要一定经验技巧(做实践即可快速掌握)、测量定位数值、修改不是那么灵活等原因,一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites,因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力,所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用,这样比较值得。

 

四、css sprites实例示例教程 

1、素材与要实现效果截图

2、sprites实例教程解释介绍

首先这些图标素材是放在同一张图片上(PS拼合),然后实现成列表类布局,列表每个前图标不同。使用css sprites实现此布局(其实使用background样式实现)。

首先此列表布局我们使用ul li列表布局,每个li站一行排版,对ul设置padding实现四周内容与边框一定间距效果,因为每个li前面图标不同,但此背景图片是拼合在一张图片上,所以这里做li里开始使用span标签实现这个不同图标效果,每个图标不同为了区别span所以对span设置不同class,不同class对应设置定位相应的图标。

3、实例教程准备

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

4、先布局出效果,再css sprites设置不同背景图标样式

html代码:

<ul class="Sprites">     <li><span class="a1"></span><a href="#">WORD文章标题</a></li>     <li><span class="a2"></span><a href="#">PPT内容标题</a></li>     <li><span class="a3"></span><a href="#">Excel内容标题</a></li>     <li><span class="a4"></span><a href="#">PDF内容标题</a></li>     <li><span class="a5"></span><a href="#">文本文档标题</a></li> </ul> 
登入後複製

为了区别不同效果对span加入不同class。

css代码:

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  overflow:hidden;background:url(ico.png) no-repeat} ul.Sprites li a{ padding-left:5px} 
登入後複製

效果截图

css sprites关键代码与解释

首先对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开始显示此背景图标

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

 

CSS sprites技巧技术总结 

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

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles