pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

CssGaga – AutoSprite

CssGaga – AutoSpriteHTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、HTML5教程、HTML5視頻、HTML5論壇等。

 市面上有一些CSS Sprite Generator,要么是需要手動調整圖片位置,要么需要保存圖片并拷貝粘貼css代碼,用起來很是麻煩,想必這也是沒有大規模使用起來的原因吧。

CssGaga使用了不同的思路,簡化了所有這些操作,使用時只需將css拖進CssGaga這一步即可完成所有操作!

下面通過一個例子來說明: 比如HTML:

<s class="i1"></s><s class="i2"></s><s class="i3"></s><s class="i4"></s><s class="i5"></s><s class="i6"></s>

css源文件:

body{background-color:black;}s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat;}.i1{background-image:url('slice/1.png');}.i2{background-image:url('slice/2.png');}.i3{background-image:url('slice/3.png');}.i4{width:64px;height:64px;background-image:url('slice/4.png');}.i5{background-image:url('slice/3.png');}.i6{width:64px;height:64px;background-image:url('slice/6.gif');}.i11{width:60px;height:60px;background-image:url('slice/1.jpg');}.i12{width:60px;height:60px;background-image:url('slice/2.jpg');}.i13{width:60px;height:60px;background-image:url('slice/3.jpg');}.i14{width:60px;height:60px;background-image:url('slice/4.jpg');}

CssGaga生成后:

body{background-color:black}s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat}.i1{background-image:url(sprite/style.png);background-position:-130px 0}.i2{background-image:url(sprite/style.png);background-position:-130px -17px}.i3{background-image:url(sprite/style.png);background-position:-130px -34px}.i4{width:64px;height:64px;background-image:url(sprite/style.png);background-position:0 0}.i5{background-image:url(sprite/style.png);background-position:-130px -34px}.i6{width:64px;height:64px;background-image:url(sprite/style.png);background-position:-65px 0}.i11{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:0 0}.i12{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-61px 0}.i13{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-122px 0}.i14{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-183px 0}

同時生成sprite圖片sprite/style.png和sprite/style.jpg

文件對比:

  before after
html before.htm after.htm
css style.source.css style.css
image png/gif總大小:10.2KB

 

jpg總大小:9.07KB

slice/1.png

slice/2.png

slice/3.png

slice/4.png

slice/6.gif

slice/1.jpg

slice/2.jpg

slice/3.jpg

slice/4.jpg

5.79KB

 

sprite/style.png 

7.08KB

sprite/style.jpg 

使用方法

  • 選中AutoSprite開啟此功能
  • 碎圖片放在slice文件夾,slice文件夾與css文件同級且引用時為相對路徑
  • css語句不能縮寫,即下面這種不被支持
    background:url('slice/1.png')

    要按照下面這種寫法

    background-image:url('slice/1.png')

    引號單雙無所謂,不寫也行,反正最后都會被壓縮掉

    強烈建議使用 Slice to Code 功能,既省事又不會出錯

文件

  • slice為png8、png32、靜態gif和jpg格式
  • 合并后的sprite位于與slice同級的sprite文件夾中,已壓縮,文件名為該css文件名+圖片后綴(png/jpg)
  • sprite后的png為帶alpha透明的png8(fireworks有這個功能,photoshop沒有),可用來實現漸進增強
  • sprite中每個slice的間距是1px
  • 每個css文件生成的sprite圖片最多有3個:
    1. IE6下劃線hack寫法的png拼為一張,名為css文件名-ie6.png
      _background-image:url('slice/1.png')
    2. 除上面之外的png拼為一張,名為css文件名.png
    3. 所有jpg拼為一張,名為css文件名.jpg

注:使用同步功能時可把css和sprite拷過去

拆分

由于png8的顏色數只有256色,雖然CssGaga會智能壓縮,但有時會因此出現失真的情況,解決方法有:

  1. 將顏色數多的不透明圖片改為jpg格式
  2. 拆分AutoSprite,詳見下文

另外,有時需對公用的文件進行拆分,舉例來說,index.css調用了這幾個文件

@import url('header.css');@import url('index.import.css')@import url('footer.css')

header.css和footer.css是很多頁面公用的,按照現在這種方式header和footer中slice會合并到index.png上,怎么樣獨立出header.png和footer.png呢?

很簡單,在header.css和footer.css中加入這一句:

#CssGaga{background-image:none}

注:

  • 當作普通的css規則來寫即可,如果注釋掉的話則不生效;CssGaga壓縮后的文件中會把這一句去除
  • 當header.png和footer.png重新生成時其slice的position可能會改變,其它調用header.css和footer.css的css最好一起更新,比如list.css
    @import url('header.css');@import url('list.import.css')@import url('footer.css')

    發布時只生成index.css,而不生成list.css,則list.css中的header.png和footer.png的background-position還是舊的,解決方法有一個原則:改什么拖什么

    比如此次更改了header.css,則將header.css拖進CssGaga生成即可,拖進來之前一定要先選中檢查關聯性,這樣所有調用header.css的css都會重新生成一遍,所有重新處理過的文件會出現在最后生成的文件列表里,按這個步驟發布文件再安全不過了

 

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

html5高手是怎么煉成的–其實只需要三步
主站蜘蛛池模板: 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | 无线联网门锁|校园联网门锁|学校智能门锁|公租房智能门锁|保障房管理系统-KEENZY中科易安 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | MOOG伺服阀维修,ATOS比例流量阀维修,伺服阀维修-上海纽顿液压设备有限公司 | 风电变桨伺服驱动器-风电偏航变桨系统-深圳众城卓越科技有限公司 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 云南成人高考网| 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 集装箱标准养护室-集装箱移动式养护室-广州璟业试验仪器有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 国产频谱分析仪-国产网络分析仪-上海坚融实业有限公司 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 热镀锌槽钢|角钢|工字钢|圆钢|H型钢|扁钢|花纹板-天津千百顺钢铁贸易有限公司 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | 浙江宝泉阀门有限公司 | 电动垃圾车,垃圾清运车-江苏速利达机车有限公司 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 非小号行情 - 专业的区块链、数字藏品行情APP、金色财经官网 | 北京网站建设-企业网站建设-建站公司-做网站-北京良言多米网络公司 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | B2B网站_B2B免费发布信息网站_B2B企业贸易平台 - 企资网 | 钣金加工厂家-钣金加工-佛山钣金厂-月汇好 | 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 存包柜厂家_电子存包柜_超市存包柜_超市电子存包柜_自动存包柜-洛阳中星 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 除甲醛公司-甲醛检测治理-杭州创绿家环保科技有限公司-室内空气净化十大品牌 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 厂房出租_厂房出售_产业园区招商_工业地产&nbsp;-&nbsp;中工招商网 | 高温热泵烘干机,高温烘干热泵,热水设备机组_正旭热泵 | 一体化污水处理设备,一体化污水设备厂家-宜兴市福源水处理设备有限公司 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 |