اذهب إلى المحتوى
  • 0

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

سعاد

السؤال

Recommended Posts

  • 0

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

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

مثال:

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

sprite.png.6f78d4981d53487d2e0a98870f135

وهذا الكود المسؤول عن تغيير موضع 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;
}

 

تم التعديل في بواسطة E.Nourddine
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...