2

以下のような基本的なアンカーがあり、背景を 10x10px にしたいのですが、モバイル デバイスでクリックできるように、余白ではなく画像の周りに 1em のパディングが必要です。

問題は、背景を使用しているため、余白により画像が全領域にわたってタイル状になり、クリック可能な領域が増加しないことです。

パディングを使用してアンカーの背景を 10x10px に維持する方法はありますか?

<a id="page_close" href="/course/"></a>

#page_close {
    background-image: url("/images/close.png");
    height: 10px;
    margin: 1em;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 10px;
}

これはclose.pngスプライト画像です:

私の近くのスプライト

4

2 に答える 2

1 
#page_close {
    background-image: url("/images/close.png");
    padding: 10px;
    background-size: 100% 100%;
    height: 10px;
    margin: 1em;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 10px;
}

background-size役立つかもしれません

お役に立てれば ：）

これを行うだけではない場合：

HTML

<a id="page_close" href="/course/"><img src="images/close.png" class="close"/></a>

CSS

 #page_close {
        height: 10px;
        width: 10px;
        margin: 1em;
        position: absolute;
        right: 0;
        padding: 10px;
        text-indent: -9999px;
        top: 0;
        width: 10px;
    }
    .close {
    width: 10px;
    height: 10px;
    }
于 2013-09-24T11:39:34.153 に答える