1、圖片素材
圖片素材如下（大小：137px * 264px），圖中從上到下，連續(xù)存放了兩張100px * 100px的圖
2、HTML代碼
html代碼如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .icon { width:100px; /*--設(shè)置背景圖顯示區(qū)域?qū)挾?-*/ height:100px;/*--設(shè)置背景圖顯示區(qū)域高度--*/ border:1px solid red; background-image:url(icons.png); /*--設(shè)置背景圖像--*/ /*--no-repeat 不允許圖像在任何方向上平鋪,repeat-y,repeat-x分別允許圖片在y，x方向上平鋪--*/ background-repeat:no-repeat; } </style></head><body> <div class="icon up"><p>圖片上半部分</div> <div class="icon down"><p>圖片下半部分</p></div></body></html>顯示效果：
修改代碼如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .icon { width:100px; /*--設(shè)置背景圖顯示區(qū)域?qū)挾?-*/ height:100px;/*--設(shè)置背景圖顯示區(qū)域高度--*/ border:1px solid red; background-image:url(icons.png); /*--設(shè)置背景圖像--*/ /*--no-repeat 不允許圖像在任何方向上平鋪,repeat-y,repeat-x分別允許圖片在y，x方向上平鋪--*/ background-repeat:no-repeat; } .up { background-position: 0px 0px; } .down { background-position: 0px -100px; } </style></head><body> <p>圖片上半部分</p> <div class="icon up"></div> <p>圖片下半部分</p> <div class="icon down"></div></body></html>顯示效果：
3、總結(jié)
載入背景圖片，根據(jù)需要設(shè)置展示區(qū)寬度和高度，及背景圖片的位置，讓其目標(biāo)圖片內(nèi)容“恰好落在”展示區(qū)，其中主要是利用了background-position的一些特性，圖解如下
說明：
background-position：0 0
背景圖片的左上角和所在容器左上角對齊，超出的部分隱藏。等同于 background-position: left top、background-position:0% 0%
background-position: 100% 100%
背景圖片的右下角和所在容器的右下角對齊，超出的部分隱藏。等同于background- positon: right bottom、background-positon:容器(container)的寬度-背景圖片的寬度,容器 (container)的高度-背景圖片的高度
background-position: 0 -100px;。
背景圖片從所在容器左上角的地方向上移動100px，超出的部分隱藏。
background-position: 20 18x;。
背景圖片從所在容器左上角的地方向右移20px，向下移18px，超出的部分隱藏。
background-position: -20 -18x;。
背景圖片從所在容器左上角的地方向左移-20px，向上移-18px，超出的部分隱藏。
總結(jié)
以上所述是小編給大家介紹的CSS 從大圖中選取部分區(qū)域作為目標(biāo)圖標(biāo)的代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
新聞熱點
疑難解答
