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