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个部分,每个部分当鼠标滑过的时候,都可以实现单独地变成灰色的效果。
我们有两张图片
Background-position的妙用_第1张图片 Background-position的妙用_第2张图片
我们首先需要显示第一张照片,然后当用户将鼠标滑过某一个方块的时候,应该将图片切换为灰色的部分。
Background-position的妙用_第3张图片 
Background-position的妙用_第4张图片 
由此可见,css是多么强大并且有创造力
 

你可能感兴趣的:(background)