사진의 각 부분에 색상과 흑백을 번갈아 적용_이미지 특수 효과

<style> ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(/study/2006_12_25/2006122516414543849.jpg)} li {list-style-type:none; width:100px; height:100px; float:left} li a { display:block; width:100px; height:100px; text-decoration:none; background:transparent url(http://www.jb51.net/upload/20072795511179.jpg) no-repeat 500px 500px; } a#item1:hover {background-position: 0 0; } a#item2:hover {background-position: -100px 0;} a#item3:hover {background-position: -200px 0;} a#item4:hover {background-position: 0 -100px;} a#item5:hover {background-position: -100px -100px;} a#item6:hover {background-position: -200px -100px;} a#item7:hover {background-position: 0 -200px;} a#item8:hover {background-position: -100px -200px;} a#item9:hover {background-position: -200px -200px;} </style> <ul> <li><a id="item1" href="#" title="Item 1"> </a></li> <li><a id="item2" href="#" title="Item 2"> </a></li> <li><a id="item3" href="#" title="Item 3"> </a></li> <li><a id="item4" href="#" title="Item 4"> </a></li> <li><a id="item5" href="#" title="Item 5"> </a></li> <li><a id="item6" href="#" title="Item 6"> </a></li> <li><a id="item7" href="#" title="Item 7"> </a></li> <li><a id="item8" href="#" title="Item 8"> </a></li> <li><a id="item9" href="#" title="Item 9"> </a></li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

먼저 코드를 살펴보겠습니다

<스타일>
ul { 너비:300px; 높이:300px; 여백:0px 자동; 오버플로: 숨김 배경:투명 URL(/study/2006_12_25/2006122516414543849.jpg) }
li {list-style-type:none; 높이:100px; float:left}
li a { 디스플레이:블록; 높이:100px; ;
a#item2:hover {배경 위치: -100px 0;}a#item3:hover {배경 위치: -200px 0;}a#item4:hover {배경 위치: 0 -100px;}
a#item5:hover {배경 위치: -100px -100px;}
a#item6:hover {배경 위치: -200px -100px;}
a#item7: hover {배경 위치: 0 -200px;}
a#item8:hover {배경 위치: -100px -200px;}
a#item9:hover {배경 위치: -200px -200px;}

< li>

아주 간단하지 않나요, 저희가 사용하는 사진은 아래 사진 두장뿐입니다

이제 background-position의 사용법을 분석해 보겠습니다. A 요소의 시작 부분에서 배경 위치는 background-position:500px 500px로 설정되고 크기는 100px*100px에 불과하므로 A 아래의 모든 배경은 태그 초과 가시 범위를 표시할 수 없으며, 처음에 보이는 흑백 사진이 UL의 배경 이미지입니다. 그런 다음 마우스가 A 요소로 이동하면 배경의 이동 크기가 각 A 요소의 위치에 따라 설정되어 위의 흑백 그림 효과가 교대로 형성됩니다.