一张大图片有多个小图片
生活随笔
收集整理的這篇文章主要介紹了
一张大图片有多个小图片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這個頁面也是我看到別人的寫的，感覺不錯，就自己留下了為了以后自己可以容易找到，也希望可以方便到別人。
寫這個頁面
需要注意的是：
1.寫每一個小圖片的位置時候，要用id,這樣等級就高了，不然不起作用。
2.因為每個圖片的大小位置距離是差不多的。加入是30px, 那么第一個位置就是（-20px，-20px），因為位置是從（0,0）左上開始的，現(xiàn)在平移是 ?往右下走，就好比第四象限，按（-20n ?px, - 20n ?px）走。
3.引入的這個圖片是一樣的只是顏色不一樣，都放到父級里，一個是現(xiàn)在的狀態(tài)，一個是鼠標劃過的狀態(tài)，位置都不用變就可以換圖片了。
?
?
?
<!doctype?html>
<html?lang="en"> ????<head> ????<meta?charset="UTF-8"> ????<title>背景background-position切圖</title> ????<style> ????????.showImage{ ????????????background-image:?url(9pic2.jpg); ????????????width:?100px; ????????????height:?100px; ????????} ????????.showImage<a href="javascript:;"?target="_blank"?class="baidu-highlight">:hover</a>{ ????????????background-image:?url(9pic1.jpg); ????????} ????????ul{ ????????????<a href="javascript:;"?target="_blank"?class="baidu-highlight">list-style</a>:?none; ????????} ????????ul?li{ ????????????float:?left; ????????????margin:?20px; ????????} ????????#item1{ ????????????background-position:?0?0; ????????} ????????#item2{ ????????????background-position:?-100px?0; ????????} ????????#item3{ ????????????background-position:?-200px?0; ????????} ????????#item4{ ????????????background-position:?0?-100px; ????????} ????????#item5{ ????????????background-position:?-100px?-100px; ????????} ????????#item6{ ????????????background-position:?-200px?-100px; ????????} ????????#item7{ ????????background-position:?0?-200px; ????????} ????????#item8{ ????????????background-position:?-100px?-200px; ????????} ????????#item9{ ????????????background-position:?-200px?-200px; ????????} ????</style> ????</head> ????<body> ????????<div?class="container"> ????????????<ul> ????????????????<li?id="item1"?class="showImage"></li> ????????????????<li?id="item2"?class="showImage"></li> ????????????????<li?id="item3"?class="showImage"></li> ????????????????<li?id="item4"?class="showImage"></li> ????????????????<li?id="item5"?class="showImage"></li> ????????????????<li?id="item6"?class="showImage"></li> ????????????????<li?id="item7"?class="showImage"></li> ????????????????<li?id="item8"?class="showImage"></li> ????????????????<li?id="item9"?class="showImage"></li> ????????????</ul> ????????</div> ????</body> </html>?
轉載于:https://www.cnblogs.com/zxhh/p/6839843.html
總結
以上是生活随笔為你收集整理的一张大图片有多个小图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android下Opengl ES实现单
- 下一篇： 上传头像将光标去掉