CSS精靈是一種優(yōu)化網(wǎng)頁性能的技術(shù)，通過將多個小圖像合并為一個文件，并利用CSS背景定位顯示所需部分，從而減少HTTP請求。 1. 創(chuàng)建精靈圖：使用工具將多個圖像組合成一張大圖；2. 使用CSS設(shè)置背景圖片和位置，配合固定尺寸顯示特定區(qū)域；3. 在HTML中應(yīng)用對應(yīng)類名展示不同圖標(biāo)。它適用于頻繁使用的圖標(biāo)或按鈕，尤其在舊版瀏覽器或需極致優(yōu)化的場景下效果顯著，但手動維護(hù)坐標(biāo)較繁瑣，可借助自動化工具提升效率。

You can reduce the number of HTTP requests by combining multiple images into a single image file — known as a CSS sprite — and then displaying only the part you need using background positioning in CSS.

This method is especially useful for small icons or UI elements that appear frequently across your site.

What Are CSS Sprites?

A CSS sprite is a single image file that contains several smaller images, like icons or buttons. Instead of loading each one separately, you load just one file and show different parts of it depending on where it's used.

This reduces server requests, which helps pages load faster — especially on sites with lots of small graphics.

How to Create and Use a Sprite Image

Here's how to get started:

• Combine images into one larger image (you can use tools like Photoshop, GIMP, or online sprite generators).
• Use CSS background-image and background-position to show only the relevant section.
• Set fixed dimensions on the element so it shows exactly the right part of the sprite.

For example, if you have a sprite.png that contains a play button starting at (0, 0) and a pause button starting at (-40px, 0), you'd do something like this:

 .icon {
  background-image: url('sprite.png');
  width: 40px;
  height: 40px;
}

.play {
  background-position: 0 0;
}

.pause {
  background-position: -40px 0;
}

Then in HTML:

 <div class="icon play"></div>
<div class="icon pause"></div>

It looks a bit tricky at first, but once you line up the positions correctly, it works smoothly.

When and Why to Use CSS Sprites Today

While HTTP/2 and modern asset delivery methods have reduced the performance penalty of multiple requests, sprites still help in some cases:

• On older browsers or networks where each request still matters.
• For icon sets that are small and used often across many pages.
• To minimize round trips when optimizing for speed-critical views like landing pages.

Sprites also give you more control over image loading order and caching behavior.

Just be aware that managing sprite coordinates manually can get tedious, especially with frequent design changes. Tools like SASS maps or build plugins can automate much of the process if you're working on a large project.

基本上就這些。 If you're dealing with a static site or legacy system, CSS sprites remain a solid optimization trick — not flashy, but effective.

以上是如何使用CSS Sprites減少HTTP請求的數(shù)量？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！