Background-position的妙用

Background-position的妙用 - 陈希章

chenxizhang 2021-08-27 原文

Background-position的妙用

在网页中，我们会用到大量的图片，其中大部分是作为背景存在的。大家都会用Background-image的属性指定图片。但今天重点演示一下使用background-position的妙用<!DOC…

在网页中，我们会用到大量的图片，其中大部分是作为背景存在的。大家都会用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是多么强大并且有创造力

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, “Courier New”, courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }