Usage of alternative background-position

Posted by john
1/24/2007
Related Tags:
div position  div background  div usage  List Style Position  Background Color  Background Image  Background Repeat  Background Attachment  Background Position  Background  Position  css background  css position  css background image 

   Code:  

<style>
  Ul (width: 300px; height: 300px; margin: 0px auto; padding: 0px; overflow: hidden; background: transparent url (image / menu_gray.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 (image / menu_color.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> 

  Is not very simple, and we also used the picture is only just below the two: 

  Now we are to analyze the use of background-position: 

  A elements at the beginning of a Background Position set to background-position: 500px 500px, and the size of it that only 100 px * 100px it, so A labelling of all backgrounds can not be more than a visual scope, we begin to see the black-and-white UL photos is the background image.    Then when the mouse moved to the elements on the A, A further Element in each location where they were set to the background of mobile size, thus forming the above effect of alternating black and white picture. 

Related articles:

Css use of a section of the definition of input box
  This is a use css do input box, the box can be a top graphics, graded to the bottom, the feeling can be.    Now a lot of things are made directly by flash ui, but flash of database operations more clues are not, to learn well.    <Input name = "aa" type = &...
Intermediate HTML tags Guide span and div
  In view HTML primary purpose of the handbook is the skeleton of HTML elements, the increased number of osteosarcoma Intermediate Guide, they should not be special difficulties, but we can further enhance the understanding of HTML, so that we can do something more useful things.    ...
How to select the best domain name brand
  How to select the best domain name brand    Everybody knows that. Com is the first choice, and therefore everyone in the digital economy in the hope that the growth of the enterprises should at least have more than one of its trademark title permanent. Com domain name as its onlin...
Mouse painted insider complete access technology - plants chapter
  Beautiful world should be colorful, a beautiful painting can not be too isolated, the characters and animation can be demonstrated by the vivid, which is also inseparable from the true landscape, an endless grassland, a lush indigenous forests and so on. In short, we must create exquisite FL...
Ajax perfect solution to a troublesome problem
  CEOs recently to a small function, in the search list of Internet cafes with Internet cafes owned agents this condition, conditions of the original search area is a two linked, according to different needs of different areas showed that the agent pool.    That is the trigger in the...