كيف أستعمل إصدارات متعدد ﻷيقونة png داخل صفحة؟

كما تعلم تتوفر تقنية css3على إمكانية  تغيير الصور عند حدث معين مثلا  hover، حيث يوضع داخل كود التنسيق عند  هذا الحدث رابط الصورة الجديدة والتي تظهر بمجرد مرور زر الفأرة فوق الرابط أو العنصر المعني بالحدث.

كما يمكن تغيير موضع الصورة، حيث أن الصورة المستعملة كخلفية تتكون من صور عدة، وفي كل حدث يتغير موضع الصورة البارز.

مثال:

باعتبار الصور التالية:

وهذا الكود المسؤول عن تغيير موضع position الصورة في الخلفية:

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}