استخدام جزء من صورة كخلفية باستخدام CSS

في CSS3، يمكنك تحقيق ذلك باستخدام خاصية background-size و background-position. للبداية، يجب أن تحدد حجم الصورة النهائي الذي تريده، وهو 200px x 200px في حالتك. ثم، يجب عليك تحديد جزء معين من الصورة الأصلية البالغ حجمها 100px x 100px وتحديد وضعية الصورة في العنصر المستخدم لعرضها.

لتحقيق هذا، يمكنك استخدام القيم التالية:

cssCopy code
background-image: url('path_to_your_image.jpg');
background-size: 200px 200px; /* تحديد حجم الصورة النهائي */
background-position: center center; /* وضعية الصورة في العنصر */

بهذا الشكل، ستقوم CSS3 بتحجيم الصورة لتكون 200px x 200px، ثم تقوم بعرض جزء الصورة المحدد من وسطها فقط.

بالطبع! في CSS3، يمكنك استخدام قيمة background-size بالنسبة المئوية لتحديد حجم الصورة النهائي بناءً على حجم العنصر الذي يُعرض فيه الصورة. وباستخدام background-position، يمكنك تحديد موقع الجزء المراد عرضه من الصورة.

على سبيل المثال، إذا كانت الصورة الأصلية 500px x 500px، وتريد عرض جزء من وسطها بحجم 100px x 100px، يمكنك استخدام القيم التالية:

cssCopy code
background-image: url('path_to_your_image.jpg');
background-size: 40% 40%; /* تحديد حجم الصورة النهائي بنسبة 40% من حجم العنصر */
background-position: center center; /* وضعية الصورة في العنصر */

بهذا الشكل، سيتم تحجيم الصورة لتكون 40% من حجم العنصر الأب وسيتم عرض الجزء المراد بوسط العنصر.