0

以下に示すように、正常に動作する画像スプライトを使用しています。私が知りたいのは、 と を持たない の背景としてそれらをどのように使用するかdivです。widthheight

ありがとう

正常に動作します：

.social_buttons
{
    width: 30px;
    height: 30px;
    background-image: url('../images/social.png');
    background-repeat: no-repeat;
}
.facebook
{
    background-position: 0px 0px;
}
.twitter
{
    background-position: -30px 0px;
}
.google
{
    background-position: -60px 0px;
}

これにより、3 つの画像すべてが背景として繰り返し表示されます。

.mydiv
{
   background-image: url('../images/social.png');
   background-position: -60px 0px;
}

これにより、3 つの画像すべてが背景として、1 回だけ表示されます。

.mydiv
{
   background-image: url('../images/social.png');
   background-position: -60px 0px;
   background-repeat: no-repeat;
}
4

2 に答える 2

1

場合によっては、パーセンテージを使用して、サイズを決定せずに背景を適用できます。

ボタンスプライト:

 -------
|       |
|       | Default top half.
|       |
 -------
 -------
|       |
|       | :active bottom half.
|       |
 -------


button {
     background-image: url('#');
     background-size: 100% 200%;
}
button:active { background-position: bottom; }

スプライトが均等に 2 つに分割されると、200% で画像が 2 倍になり、画像の半分だけが表示されます。

これを示す例を次に示します。高さと幅を変更して、動作を確認します。

http://codepen.io/nickcolley/pen/KuLla

于 2013-10-30T14:01:54.570 に答える