CSS الصور المقتطعة

مفهوم الصور المقتطعة

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

فمثلاً الأيقونات التالية موضوعة كصور واحدة و لكننا سنقتطع منها كل أيقونة نحتاجها منها عند الحاجة.

معلومة تقنية

هذا النوع من الصور يسمى Image Sprites و هو مهم جداً لتحسين أداء الموقع لأنه يخفف الطلبات ( Requests ) التي يتم إرسالها إلى الخادم ( Server ) الذي عليه موقعك و بالتالي يقلل الضغط عنه لأنه بدلاً من أن يتم إرسال طلب إلى الخادم لتحميل كل صورة على حدا سيتم إرسال طلب واحد فقط.

طريقة عرض جزء من الصورة

بشكل عام، لعرض جزء من الصورة نقوم بوضع الصورة كخلفية، و من ثم نحدد طولها و عرضها و إحداثياتها بالنسبة للصورة الأساسية.

في المثال التالي قمنا باقتطاع صورة المنزل الموجودة في الصورة الأساسية و عرضها.

#home {
    width: 48px;
    height: 48px;
    display: inline-block;
    background: url(icons.png) 0 0;
}
        

في المثال التالي قمنا باقتطاع كل الصور الموجودة في الصورة الأساسية و عرضها بجانب عناصر القائمة.

.nav-list li a {
    position: relative;
    display: block;
    height: 60px;
    line-height: 60px;
    padding-left: 76px;
}

.nav-list li a::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 12px;
    display: inline-block;
    height: 48px;
    width: 48px;
    background-image: url(icons.png);
}

#home::before { 
	background-position: 0 0;
}

#edit::before {
	background-position: 48px 0;
}

#settings::before {
	background-position: 96px 0;
}

#support::before {
	background-position: 144px 0;
}
        

طريقة تغيير الصورة المقتطعة عند تمرير الماوس

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

في المثال التالي جعلنا الأيقونات المقتطعة من الصورة الأساسية تتبدل عند تمرير الماوس فوقها بالأيقونات الغامقة الألوان.

#home:hover::before {
	background-position: 0 48px;
}
            
#edit:hover::before {
	background-position: 48px 48px;
}
            
#settings:hover::before {
	background-position: 96px 48px;
}
            
#support:hover::before {
	background-position: 144px 48px;
}