1

ソーシャル アイコンを表示するツールバーには、次の CSS があります。

.toolbar ul li {
    height: 102px;
    width: 102px;
    display: block;
    float: right;
    margin: 0 0 0 7px;
    padding: 0;
    background: url(images/social_icons.png) center top no-repeat;
}
.toolbar ul li a {
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
}
.toolbar ul li.facebook {
    background-position: 0 0px;
}
.toolbar ul li.facebook:hover {
    background-position: -102px 0px;
}
.toolbar ul li.twitter {
    background-position: 0 -102px;
}
.toolbar ul li.twitter:hover {
    background-position: -102px -102px;
}

ただし、HTML でレンダリングする場合、アイコンを 34px x 34px のみにしたいと考えています。より高い解像度の画像の理由は、Retina スクリーンでより適切に表示できるようにするためです。ただし、次のように変更すると機能しないようです。

.toolbar ul li {
    height: 34px;
    width: 34px;
    display: block;
    float: right;
    margin: 0 0 0 7px;
    padding: 0;
    background: url(images/social_icons.png) center top no-repeat;
}

何か案は？とても有難い。

4

1 に答える 1

1

inline-block表示ブロックの代わりに表示を使用

または：

background-size: 43px 43px;
于 2013-07-20T07:04:19.320 に答える