本章跟大家介紹css 怎麼使用精靈圖? background屬性介紹(程式碼實例),讓大家可以了解css精靈圖(雪碧圖)是怎麼使用的。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一、css 如何使用精靈圖?
#介紹如何使用精靈圖使用前,我們要先知道什麼是精靈圖。只有先知道什麼是精靈圖,了解精靈圖的原理了,我們才可是說使用精靈圖。
1. 什麼是css精靈圖(sprite)?
css精靈圖(sprite)直譯為“CSS精靈”,也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”,是一種網頁圖片應用程式處理方式。其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
2.使用css精靈圖(sprite)的方法
css精靈圖(sprite)其實就是透過將多個圖片融合到一張圖裡面,然後透過CSS background背景定位技術技巧佈局網頁背景。在需要用到圖片的時候,現階段是透過CSS屬性background-image組合background-repeat, background-position等來實現圖片的顯示。
3.程式碼實作:
使用到的精靈圖(sprite)素材:incn.png
# #程式碼:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文子居中</title> <style> * { margin: 0; padding: 0; } .sprites{ width: 200px; margin: 50px auto; } .sprites div { margin: 5px; } .sprites span { float: left; width: 20px; height: 20px; background-image: url(css 如何使用精靈圖? background屬性介紹(程式碼實例));//引用精灵图(sprite):incn.png background-size: 60px 40px; } .sprites1 { background-position: 0 0; } .sprites2 { background-position: -20px 0; } .sprites3 { background-position: 0 -20px; } .sprites4 { background-position: -20px -20px; } .sprites5 { background-position: -40px 0; } .sprites6 { background-position: -40px -20px; } </style> </head> <body> <div class="sprites"> <div><span class="sprites1"></span>付款图标</div> <div><span class="sprites2"></span>存款图标</div> <div><span class="sprites3"></span>删除图标</div> <div><span class="sprites4"></span>粘贴图标</div> <div><span class="sprites5"></span>笑脸图标</div> <div><span class="sprites6"></span>编辑图标</div> </div> </body> </html>
二、關於css background屬性其他屬性值介紹
#background屬性除了上述的background-image,background-size,background-position屬性值以外,還有其他的屬性值,例如:1.background-color:定義了元素的背景顏色.一般定義的都是純色的背景。body {background-color:#b0c4de;}
background-repeat:repeat-x || repeat-y || no-repeat ;
background-repeat:scroll || fixed || inherit;
以上是css 如何使用精靈圖? background屬性介紹(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!