CSS background 控制顯示圖片的一部分
發(fā)布時間：2014-10-15 17:35:55 作者：佚名 
我要評論
我要評論采用一張圖片多種效果或內(nèi)容顯示，這時就可以使用background進行定位控制顯示圖片的某一部分，實現(xiàn)代碼如下，從事web前端的朋友可以看看
使用情形：防止反復請求圖片資源，我們經(jīng)常采用一張圖片多種效果或內(nèi)容顯示。
假設(shè)我有紙張豎直方向的一張圖片，豎直y軸方向分別是字母：A,B,C....
現(xiàn)在分別要顯示A、B、C 等字母，我們的CSS可以這么寫：
這里圖片一個字母所占的width=20px,height=20px;
.mar_wordA {
background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent;
}
.mar_wordB {
background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent;
}
.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent;
}
若果是水平方向的圖片，調(diào)整x軸的值即可。
注：需要容器負載圖片。
假設(shè)我有紙張豎直方向的一張圖片，豎直y軸方向分別是字母：A,B,C....
現(xiàn)在分別要顯示A、B、C 等字母，我們的CSS可以這么寫：
這里圖片一個字母所占的width=20px,height=20px;
復制代碼
代碼如下:.mar_wordA {
background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent;
}
.mar_wordB {
background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent;
}
.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent;
}
若果是水平方向的圖片，調(diào)整x軸的值即可。
注：需要容器負載圖片。
相關(guān)文章
- 下面小編就為大家?guī)硪黄狢SS background全部匯總。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-19
CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下2016-05-27
- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:2016-05-17
- 這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下2015-08-24
- 這篇文章主要介紹了CSS3屬性background-size使用指南,需要的朋友可以參考下2014-12-09
CSS背景background、background-position使用詳解
這篇文章主要介紹了CSS背景background、background-position使用方法,需要的朋友可以參考下2014-10-22- background-size可以設(shè)置2個值，第1個值用于指定背景圖的width，第2個值用于指定背景圖的height，不了解的朋友可以參考下2014-09-24
純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）
這篇文章主要介紹了純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）的相關(guān)資料,需要的朋友可以參考下2018-12-06
