Alternate color and black and white in each part of the photo_Image special effects

<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 select all Note: If you need to introduce external Js, you need to refresh to execute ]

Let’s take a look at the code first

< li>
• < ;/a>

Isn’t it very simple, and the pictures we use are only the two pictures below

Now let’s analyze the usage of background-position: At the beginning of the A element, the background position is set to background-position:500px 500px, and its size is only 100px*100px, so all the backgrounds under the A tag exceed The visible range cannot be displayed, and the black and white photo we see at the beginning is the background image of UL. Then when the mouse moves to the A element, the moving size of the background is set for each A element according to its position, thus forming the alternating black and white picture effect above.