CSS Image Sprites

CSS Image Sprites چیست؟

تصویرهای sprite تکنیکی هستند که در آن چندین تصویر کوچک را داخل یک تصویر بزرگ‌تر (sprite sheet) قرار می‌دهیم و با CSS بخش‌های مختلف این تصویر بزرگ را نمایش می‌دهیم. این روش باعث کاهش تعداد درخواست‌های HTTP به سرور می‌شود و سرعت بارگذاری صفحات را بهتر می‌کند.

—

نمونه ساده CSS Image Sprite

فرض کنیم یک sprite داریم که شامل سه آیکون است (مثلاً سه شکل مربع رنگی کنار هم):

\| آیکون 1 (قرمز) | آیکون 2 (سبز) | آیکون 3 (آبی) |

هر آیکون اندازه 50×50 پیکسل دارد و تصویر sprite ما 150×50 است.

—

کد نمونه:

“`html
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<title>نمونه CSS Image Sprite</title>
<style>
.icon {
width: 50px;
height: 50px;
background-image: url(‘https://i.imgur.com/2y6Q8rb.png’); /* فرضی: تصویری که سه مربع رنگی دارد */
background-repeat: no-repeat;
display: inline-block;
}

.icon.red {
background-position: 0 0; /* بخش اول تصویر */
}

.icon.green {
background-position: –50px 0; /* بخش دوم تصویر */
}

.icon.blue {
background-position: –100px 0; /* بخش سوم تصویر */
}
</style>
</head>
<body>

<h1>نمونه CSS Image Sprites</h1>

</body>
</html>
“`

—

توضیح کد:

* ما یک کلاس `.icon` تعریف کردیم که اندازه ثابت (50×50) و تصویر پس‌زمینه‌ی بزرگ دارد.
* با استفاده از `background-position` بخش خاصی از تصویر بزرگ انتخاب می‌شود.
* هر آیکون با کلاس مخصوص خودش (`red`، `green`، `blue`) موقعیت بخش مورد نظر را تعیین می‌کند.