Question

我想让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>

Answer 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;
}

Working example

Answer 2

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

#item0:before {
        background: url('http://www.fabian.dk/all.png') 0 7px no-repeat;
        content : '';
        height: 40px;
        position: absolute;
        width: 40px;
    }

无法显示部分css精灵图片

2 个答案: