ホームページ > 記事 > ウェブフロントエンド > CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します

CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します

高洛峰オリジナル: 2016-11-24 09:19:061428ブラウズ

解決策について直接話しましょう:

結合された大きな画像のサイズが 900 x 1000 ピクセルであると仮定します (上の図に示すように)

次に、左上のカバのアイコンを撮りたいと思います。画像の隅にあるアイコンを選択して、アイコンのサイズを小さくします。

通常の画像選択:

.sprite {
background: url(&#39;imgs/woqu_localjoin_all.png&#39;) no-repeat -21px -80px;
width: 190px;
height: 154px;
}

次に、通常のアイコンサイズの半分を選択します:

<pre name="code" class="html">.sprite {
background: url(&#39;all.png&#39;) no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
}

OK、完了です。

最後に、CSS スプライト測定ツールをお勧めします: http://www.spritecow.com/

それを開いて、組み立てられた PNG 画像をドラッグしてください:

CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：テキストを270度回転するCSS次の記事：テキストを270度回転するCSS

続きを見る

CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します

関連記事