天津11选5基本走势图表:將圖片組合CSS貼圖定位技術(雪碧圖)

作者: 魯智深 分類: div+css 發布時間: 2013-11-15 22:49

天津11选5中奖结果 www.ebzvaz.com.cn CSS Sprites 簡介:通常被意譯為“CSS圖像拼合”或“CSS貼圖定位”。CSS Sprites并不是一門新技術,目前它已經在網頁開發中發展得較為成熟,阿里巴巴各子公司的網頁中到處都可發現css sprites 的影子。

經常做網站seo的朋友肯定注意到了圖片的請求次數會影響到網站打開速度。如下圖:

貼圖

貼圖

上圖中的集合了多個元素圖片,所謂的CSS貼圖定位技術就是把上圖中的小圖片一個個調用出來。

博主我比較習慣使用像素(px)來定位圖片。

以圖片的左上角定位原點。

定位原點

定位原點

原點到搜索框的距離是x=11,y=15。

在以這個點定位圖片的高度和寬度為width: 280px;?height: 32px;

調用css代碼如下:

1
2
3
4
5
6
    background: url("images/bg.png") no-repeat scroll 0 -108px rgba(0, 0, 0, 0);
    color: #666666;
   height: 32px;
    overflow: hidden;
    position: relative;
    width: 280px;

注意:

no-repeat(不平鋪)防止出現錯位。

如果覺得我的文章對您有用,請隨意打賞。您的支持將鼓勵我繼續創作!

一條評論
  • 貓貓

    2013 年 11 月 16 日 12:15

    no-repeat(不平鋪)防止出現錯位。

發表評論

電子郵件地址不會被公開。 必填項已用*標注