css精灵图的使用步骤
生活随笔
收集整理的這篇文章主要介紹了
css精灵图的使用步骤
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
精靈圖的使用步驟
1.創(chuàng)建一個盒子，例如span、b、div
2.設(shè)置盒子的大小為小圖片的大小
3.設(shè)置背景圖片為精靈圖
4.測量小圖片距離精靈圖左邊和上邊的距離（background-position：x y）,x和y的值均為負數(shù)。
下面這就是一個精靈圖。
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.five{display: inline-block;width: 22px;height: 24px;background-image: url(./images/taobao.png);background-position: -1px -175px;}span {display: inline-block;width: 18px;height: 24px;background-color: pink;background-image: url(./images/taobao.png);/* 背景圖位置屬性: 改變背景圖的位置 *//* 水平方向位置 垂直方向的位置 *//* 想要向左側(cè)移動圖片, 位置取負數(shù); */background-position: -3px 0;}b {display: block;width: 25px;height: 21px;background-color: green;background-image: url(./images/taobao.png);background-position: 0 -90px;}</style> </head> <body><!-- <img src="./images/taobao.png" alt=""> --><!-- 精靈圖的標簽都用行內(nèi)標簽 span, b, i --><span></span><b></b><span class="five"></span> </body> </html>總結(jié)
以上是生活随笔為你收集整理的css精灵图的使用步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 防火卷帘门算料计算公式
- 下一篇： 电商实训一：电子商务商业模式实训及思考