CSSを使用してPNGから小さなアイコンをキャプチャする方法

PNG から小さなアイコンをインターセプトする Css メソッド: まず、background 属性を使用して PNG 画像を導入し、no-repeat 属性値を使用して画像を非繰り返しに設定し、次に、background-position 属性を使用します。正確な位置決めのために画像の初期位置を設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css ファイル

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-height分别对应每个小图标的宽和高*/
    width: 20px;    
    line-height: :20px;
    display: inline-block;
}
.icon-small
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

html ファイル

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>

1 ページまたは複数のページの背景画像が 1 つの画像に統合されているのはなぜですか?

Web サイトにアクセスすると、サーバーに対して HTTP リクエストを行います。Web サイトを開く速度、処理とページ サイズ、画像サイズ、ネットワーク速度などの要素に加えて、もう 1 つの重要な要素がHTTP リクエストの番号。 HTTP リクエストが多いほど、Web サイトを開く速度が遅くなります。サーバーに対して HTTP リクエストが行われるとき、ページを開く速度による遅延は約 0.01 秒です。接続と画像によってリクエストが行われます。HTTP リクエストが多すぎる場合は、ページを開く速度によって引き起こされる遅延は約 0.01 秒です。リクエストが多いとページに大きな遅延が発生し、当然アクセス速度も遅くなります。

すべての背景画像を 1 つの画像に統合すると、サーバーに対して HTTP リクエストが 1 つだけ行われるため、リクエストの数が大幅に減り、遅延も小さくなります。次に、CSS のbackground-image プロパティとbackground-position プロパティを使用して、必要な背景画像を実現し、ページの望ましい表現効果を実現するように配置します。

推奨学習: css ビデオ チュートリアル

以上がCSSを使用してPNGから小さなアイコンをキャプチャする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。