Background-position的用法

最新推荐文章于 2024-06-27 07:29:40 发布

软件-攻城狮

最新推荐文章于 2024-06-27 07:29:40 发布

阅读量885

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/smshuxue/article/details/14054133

版权

CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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是多么强大并且有创造力

软件-攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫