ホームページ > 記事 > ウェブフロントエンド > CSS スプライトの配置実装_html/css_WEB-ITnose

CSS スプライトの配置実装_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:43:421248ブラウズ

CSS スプライトとは

通常、私たちはそれを CSS 画像ステッチング技術と呼んでいます。もちろん、CSS スプライトのことを「CSS テクスチャ配置」と呼ぶ人もいます。

原則

CSS スプライトの原則: 実際には、Web ページ内のいくつかの背景画像を画像ファイルに統合し、CSS の「background-image」、「background-repeat」、「background-」の組み合わせを使用します。「position」を使用して背景を作成します。位置決め、background-position では、数値を使用して背景画像の位置を正確に特定できます。

利点

CSS スプライトを使用すると、Web ページの http リクエストを大幅に削減できるため、ページのパフォーマンスが大幅に向上します。これが CSS スプライトの最大の利点でもあり、CSS スプライトが広く普及し、適用される主な理由です。 ;
CSS スプライトは画像のバイト数を減らすことができます。3 つの画像を 1 つの画像に結合した場合のバイト数を何度も比較しましたが、そのバイト数は常にこれら 3 つの画像のバイト数の合計よりも小さくなります。
は、画像のコレクションに名前を付けるだけで済み、小さな要素にすべて名前を付ける必要がないため、Web デザイナーの問題を解決し、Web ページ制作の効率を向上させます。
スタイルを変更するのは簡単です。1 つまたは数枚の画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

結合画像の作成方法

CSS Sprite生成ツール

PSを使用して生成

CSS Spriteの位置決め実装（PSはX、Yを決定します）

予備知識

DIV+CSSの基礎（特に背景と背景位置） 2つのパラメータ)

PSの基本

素材?png形式

画像の位置を取得する

PSを開き、右側の情報バーをクリック
補助線ツールを使用して位置を決定します
距離を表示するアイコン間の間隔 (この画像を手動で作成する場合、計算しやすいように均等に配置するのが最善です。この画像は 20 ピクセル離れています)、画像を見てください

ヒント:

背景の位置はに基づいています画像の左上隅、つまり 0 0

パラメーターはピクセルとパーセンテージを混合できます (例: 5px 20%) パラメーターが 1 つしかない場合、他のパラメーターはデフォルトで 50% になります

コードの実装。 (CSS にはコメントが含まれています)

HTML: Index .html

<!DOCTYPE html><html lang="zh"><head>  <meta charset="UTF-8">  <title>CSS_Sprite</title>  <link rel="stylesheet" href="css/style.css"></head><body>       <h1>只取一部分做演示</h1>        <div class="content">          <ul>            <li><a href="#"><i class="icon_fdj"></i></a></li>            <li><a href="#"><i class="icon_xj"></i></a></li>            <li><a href="#"><i class="icon_dy"></i></a></li>            <li><a href="#"><i class="icon_xx"></i></a></li>          </ul>          <ul>            <li><a href="#"><i class="icon_xxk"></i></a></li>            <li><a href="#"><i class="icon_bjb"></i></a></li>            <li><a href="#"><i class="icon_dw"></i></a></li>            <li><a href="#"><i class="icon_bq"></i></a></li>          </ul>          <ul>            <li><a href="#"><i class="icon_info"></i></a></li>            <li><a href="#"><i class="icon_infoa"></i></a></li>            <li><a href="#"><i class="icon_qes"></i></a></li>            <li><a href="#"><i class="icon_cz"></i></a></li>          </ul>          <ul>            <li><a href="#"><i class="icon_hb"></i></a></li>            <li><a href="#"><i class="icon_dp"></i></a></li>            <li><a href="#"><i class="icon_fj"></i></a></li>            <li><a href="#"><i class="icon_ck"></i></a></li>          </ul>        </div></body></html>

CSS: style.css

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }/*CSS reset*/h1{ text-align:center; font-size:30px; font-weight:bold; }.content{ width: 176px; height: 176px; margin: 0 auto; border:2px solid #2af1d6; padding: 10px; }/*主块大小,位置*/ul{ list-style: none; display: inline-block; }/*取消列表样式,设置内联块*/i{ display: block; margin:10px; width: 17px;height:17px;background: url(../img/cssspirit.png) no-repeat; }/*设置图标为块,定义宽高及背景*/ul li a:link{text-decoration: none;} /*取消下划线*/ul li a:hover .icon_fdj{ background-position:-21px -132px; }ul li a:hover .icon_xj{ background-position:-62px -132px; }ul li a:hover .icon_dy{ background-position:-102px -132px; }ul li a:hover .icon_xx{ background-position:-122px -132px; }ul li a:hover .icon_xxk{ background-position:-21px -152px; }ul li a:hover .icon_bjb{ background-position:-62px -152px; }ul li a:hover .icon_dw{ background-position:-102px -152px; }ul li a:hover .icon_bq{ background-position:-122px -152px; }ul li a:hover .icon_info{ background-position:-21px -172px; }ul li a:hover .icon_infoa{ background-position:-62px -172px; }ul li a:hover .icon_qes{ background-position:-102px -172px; }ul li a:hover .icon_cz{ background-position:-122px -172px; }ul li a:hover .icon_hb{ background-position:-21px -192px; }ul li a:hover .icon_dp{ background-position:-62px -192px; }ul li a:hover .icon_fj{ background-position:-102px -192px; }ul li a:hover .icon_ck{ background-position:-122px -192px; }/*浮动背景位置*/.icon_fdj{ background-position: -1px -132px; }.icon_xj{ background-position:-42px -132px; }.icon_dy{ background-position:-82px -132px; }.icon_xx{ background-position:-122px -132px; }.icon_xxk{ background-position:-1px -152px; }.icon_bjb{ background-position:-42px -152px; }.icon_dw{ background-position:-82px -152px; }.icon_bq{ background-position:-122px -152px; }.icon_info{ background-position:-1px -172px; }.icon_infoa{ background-position:-42px -172px; }.icon_qes{ background-position:-82px -172px; }.icon_cz{ background-position:-122px -172px; }.icon_hb{ background-position:-1px -192px; }.icon_dp{ background-position:-42px -192px; }.icon_fj{ background-position:-82px -192px; }.icon_ck{ background-position:-122px -192px; }/*基本的定位*/

Rendering

声明：

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

前の記事：CSS 疑似要素_html/css_WEB-ITnose次の記事：CSS 疑似要素_html/css_WEB-ITnose

続きを見る