ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します
CSS スプライトは、大きな画像内の小さなアイコンのサイズを調整します
- 高洛峰オリジナル
- 2016-11-24 09:19:061510ブラウズ
解決策について直接話しましょう:
結合された大きな画像のサイズが 900 x 1000 ピクセルであると仮定します (上の図に示すように)
次に、左上のカバのアイコンを撮りたいと思います。画像の隅にあるアイコンを選択して、アイコンのサイズを小さくします。
通常の画像選択:
.sprite {
background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;
width: 190px;
height: 154px;
} 次に、通常のアイコン サイズの半分を選択します:
<pre name="code" class="html">.sprite {
background: url('all.png') no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
} OK、完了です。
最後に、CSS スプライト測定ツールをお勧めします: http://www.spritecow.com/
それを開いて、組み立てられた PNG 画像をドラッグしてください:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：テキストを270度回転するCSS次の記事：テキストを270度回転するCSS