1

CSSを使用して画像をボタンに読み込もうとしています。

ボタンサイズなどは動作するようですが、画像が正しく表示されないようです。

私のicons.pngには8つのアイコンがあり、ボタンに表示したいのはそのうちの1つだけです。clip：rectを使用してそのうちの1つだけを選択しようとしていますが、機能していないようです。

clip：rectを使用すると、画像内のアイコンの1つだけを選択できると思ったボタンに、すべてのアイコンが表示されているようです。

誰かが私がどこで間違っているのか知っていますか？（注：これにはjQueryを使用できません）

これが私のCSSとHTMLです。

<style type="text/css">
.button1
{
    position:absolute;
    left: 20px;
    width:100px; 
    height:100px;
    top:20px;
    clip:rect(0px,100px,100px,0px); /* rect(top, right, bottom, left) */ 
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
}

</style>


<body bgcolor="#DFDFDF">

    <button class="button1"><img src="icons.png"/></button>

</body>

これはそれがしていることです。

ここに画像の説明を入力してください

4

2 に答える 2

0

ボタンの画像をスタイルに移動します。ボタンのサイズは、幅と高さですでに定義されています。ボタンが「スプライト」画像（目的のボタンの背景）よりも大きい場合は、次のボタン画像が表示されます。位置とボタンのサイズの両方を正しくサイズ設定する必要があります。サンプル画像から、ボタンのサイズは約70ピクセル程度小さくする必要があります。

    .button1
    {
        width:100px; 
        height:100px;   
        background-image: url(icons.png);
        background-position: -70px -10px; /* hor vert from top left*/

    }


    <button class="button1"></button>
于 2012-10-23T01:11:54.167 に答える
0

画像にクラスを追加することになりました

<style type="text/css">
.button1
{
    position:absolute;
    left: 20px;
    width:100px; 
    height:100px;
    top:20px;
    cursor: pointer; /* hand-shaped cursor */ 
    cursor: hand; /* for IE 5.x */ 
}


  img.button_logo
    {
        position:absolute;
        left: 20px;
        top:20px;
        clip:rect(0px,100px,100px,0px); /* rect(top, right, bottom, left) */ 
        cursor: pointer; /* hand-shaped cursor */ 
        cursor: hand; /* for IE 5.x */ 
    }

</style>


<body bgcolor="#DFDFDF">

    <button class="button1"><img class="button_logo" src="icons.png"/></button>

</body>

これで、意図したとおりに表示されます。

于 2012-10-23T02:17:55.060 に答える