css精灵，又叫css背景精灵
生活随笔
收集整理的這篇文章主要介紹了
css精灵，又叫css背景精灵
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css精靈，又叫css背景精靈
????“css精靈”，英語css sprite，所以也叫做“css雪碧”技術。是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
????css精靈有什么優點，就是減少了http請求。比如4張小圖片，原本需要4個http請求。但是用了css精靈，小圖片變為了一張圖，http請求只有1個了。
????
用fireworks精確控制精靈:
例如：我們要顯示“愛逛街”這個小圖。
(1) 先在原圖（淘寶網的精靈圖），用切片，框選出 你要顯示圖的 大小（你用切片框選出矩形的寬度和高度，等價于你再頁面中給盒子設置width和height）。
(2) 我們使用fireworks中的切片繪制矩形。用矩形的寬度和高度，表示 當前小圖 向左移動量 和向上移動量。
代碼如下：
<title>css精靈，又叫css背景精靈。</title><style>*{margin:?0;padding:?0;}.box1{width:?82px;height:?20px;outline:?1px?dashed?green;margin:?200px?auto?0;background-image:?url(./image/taobao.png);background-repeat:?no-repeat;background-position:?-146px??-84px;}.box2{width:?56px;height:?22px;outline:?2px?dashed??red;margin:?200px?auto?0;background-image:?url(./image/taobao.png);background-repeat:?no-repeat;background-position:?-89px??-77px;}.box3{width:?90px;height:?21px;outline:?2px?dashed?pink;margin:?200px?auto?0;background-image:?url(./image/taobao.png);background-repeat:?no-repeat;background-position:?-0?-97px;}.box4{width:?93px;height:?19px;outline:?2px?dashed?green;margin:?200px?auto?0;background-image:?url(./image/taobao.png);background-repeat:?no-repeat;background-position:?0?-58px;}.box5{width:?56px;height:?15px;outline:?2px?dashed?yellow;margin:?200px?auto?0;background-image:?url(./image/taobao.png);background-repeat:?no-repeat;background-position:?-146px??-103px;}</style> </head> <body><div?class="box1"></div><div?class="box2"></div><div?class="box3"></div><div?class="box4"></div><div?class="box5"></div>預覽：
總結
以上是生活随笔為你收集整理的css精灵，又叫css背景精灵的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP漂流瓶代码,【按键精灵】连信打招呼
- 下一篇： 创新设计糕点品牌推广策划书简约PPT模板