Background-positionの効用
， ， 。 Background-image 。 background-position
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> title> <style type="text/css"> ul { width: 300px; height: 300px; margin: 0px auto; padding: 0px; overflow: hidden; background: transparent url(images/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(images/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> head> <body> <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> body> html> ， 9 ， ， 。 
， ， 。
，css