0

我正在尝试让 css sprites 工作。我的图像由两部分组成。左侧为黑色，右侧为白色。

下面的代码显示了图像的白色部分。如果我将#item0 中的-40px 值更改为0，它会同时显示黑色和白色部分。

我不能让它只显示图像的黑色部分。你能发现我做错了什么吗？

<style type="text/css">
    #menu-left {            
        width: 200px;
        background-color: #73b2d6;

    }

    #navlist li {
        list-style: none;
        padding-left: 10px;
        width: 190px;
    }

    #navlist a {
        width: 150px;
        height: 44px;
        padding-left: 40px;
        padding-top: 20px;
        display: block;
        width: 100px;
    }

    #item0 {
        background: url('http://www.fabian.dk/all.png') -40px 7px no-repeat;
    }
</style>

<div id="menu-left">
    <ul id="navlist">
        <li id="item0"><a href="#">link 1</a></li>
    </ul>
</div>
4

2 回答 2

1

不幸的是，它不能以我能想到的方式使用您拥有的 DOM 结构来完成。由于 li 元素比背景大，因此无法像这样剪切图像的右侧部分。

我能想到的最简单的事情是在您的 li 元素中添加一个具有固定大小的附加元素，并将背景应用于该元素而不是整个 li。

HTML：

<div id="menu-left">
    <ul id="navlist">
        <li id="item0"><div></div><a href="#">link 1</a></li>
    </ul>
</div>​

CSS：

#navlist li div {
    background: url('http://www.fabian.dk/all.png') 0 7px no-repeat;
    width: 40px;
    height: 40px;
    float: left;
}​

工作示例

于 2012-12-05T14:00:55.280 回答
0

或者，您可以使用:before伪类。

#item0:before {
        background: url('http://www.fabian.dk/all.png') 0 7px no-repeat;
        content : '';
        height: 40px;
        position: absolute;
        width: 40px;
    }
于 2012-12-05T14:07:28.263 回答