0

CSSスプライトを機能させようとしています。私のイメージは 2 つの部分で構成されています。左が黒、右が白です。

以下のコードは、画像の白い部分を示しています。#it​​em0 の -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 に答える