国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Css Sprite 圖片等比縮放圖片大小（background-size優化Sprites圖顯示）

yanbingyun1990 / 1129人閱讀

摘要：如圖所示但是，給我的背景圖片是這樣的一張圖，在我們的實例中我們使用底部菜單大小為了保證普通顯屏設備的圖像顯示，在這個圖像的基礎上做了一半的縮小。我們只計算了背景圖像的寬度值，為了確保背景圖像縮放比例正常，我們將值設置為。

在一個項目的開發過程中用到了css Sprite，有這樣一個需求：目標樣式大小是32px * 23px大小的圖片作為圖標。 如圖所示:

但是，給我的背景圖片是這樣的一張圖，256px * 46px：

在我們的實例中,我們使用底部菜單大小32px * 23px.為了保證普通顯屏設備的圖像顯示，在這個圖像的基礎上做了一半的縮小。

在最初的CSS樣式中，background-position的屬性值都不需要進行任何設置，因為他們的默認值都是“0”，如下所示：

.x-navbar [class^="x-icon-"] {
background-image: url(img/icon_navbar_new_year.png);
width: 32px;
height: 23px;
}

因此，最關鍵的問題是，我們怎么知道background-size屬性值要設置為多少？

這里有一個公式：
高分辨率圖像寬度 / 目標圖像寬度 = X
原始Sprites圖像寬度 / x = background-size的寬度值

我們高分辨率下的圖標是256px x 46px;
我們目標圖像的寬度是“64px”；
我們Sprites圖像的總寬度是“256px”

根據前面的公式 可以得知
64/32 = 2
256/2 = 128
最后的一件事情。我們只計算了背景圖像的寬度值，為了確保背景圖像縮放比例正常，我們將“height”值設置為“auto”。當然你也可以設置相的的值（設置background-sizer的寬度為auto，高度為具體值），但我發現設置寬度會比較容易。

.x-navbar [class^="x-icon-"] {
    background-size: 128px auto;
}

然后就是根據圖片的位置坐標進行顯示了：

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

這樣就實現了圖中的效果了！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111279.html

相關文章

  • 你知道SVG Sprites是什么嗎，還在用css sprite就太low了

    摘要：它是基于，由聯盟進行開發的。是一種采用來描述二維圖形的語言這個大家都知道，那么元素是什么呢單純翻譯的話，是符號的意思，然我的理解是元素用來定義一個圖形模板對象，它可以用一個元素實例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，這里是@IT·平頭哥聯盟，我是首席填坑官——蘇南(South·Su)，...

    fevin 評論0 收藏0

  • 雪碧圖sprity 合并多圖使用心得

    摘要：介紹是一個模塊化的雪碧圖生成工具會根據目錄中的圖片生成相應的雪碧圖和樣式文件，支持圖，可以內嵌編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。 介紹 sprity 是一個模塊化的雪碧圖生成工具會根據目錄中的圖片生成相應的雪碧圖和樣式文件，支持retina圖，可以內嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。sprity 的前身是css-sp...

    vboy1010 評論0 收藏0

  • 移動端web app自適應布局探索與總結

    摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題 在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

    Benedict Evans 評論0 收藏0

  • 移動端web app自適應布局探索與總結

    摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設計稿為基準等比例設置。給根節點設置一個基礎值，然后頁面的所有元素布局均相對于該值采用單位設定。 1、困擾多時的問題 在這之前做web app開發的的時候，在自適應方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個平衡值寫死，我們的設計稿都是iPhone5的640 * 1136標準，所以高度一般取個大概值，各種圖標的...

    wangjuntytl 評論0 收藏0

  • img/background/iconfont---誰最適合你？

    摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...

    tinyq 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<