يمكن أن يكون تمديد صورة الخلفية على الكتلة بأكملها مفيدا عند إنشاء صفحة ويب أو عند تصميم كتل المحتوى. هذا يجعل من الممكن إنشاء تأثيرات بصرية مثيرة للاهتمام ويجعل تصميم الصفحة أكثر جاذبية. إذا كنت تريد معرفة كيفية تمديد صورة الخلفية على الكتلة بأكملها ، فقد أعددنا لك دليلا خطوة بخطوة.
أولا ، سوف تحتاج كس لتعيين قواعد لصورة الخلفية. للقيام بذلك ، يمكنك استخدام خاصية حجم الخلفية مع القيمة "غطاء". هذا يعني أن الصورة ستمتد على كامل المساحة المتاحة للكتلة ، مع الحفاظ على نسبها.
مثال:.بلوك {
الخلفية-صورة: رابط ("صورة.جبغ");
حجم الخلفية: غطاء;
}
ومع ذلك ، إذا كنت ترغب في تمديد الصورة إلى العرض الكامل للكتلة ، بغض النظر عن ارتفاعها ، يمكنك استخدام خاصية حجم الخلفية مع القيمة "100 ٪ تلقائي". سيسمح لك ذلك بملء العرض المتاح بالكامل للكتلة بالصورة ، مع الحفاظ على نسبتها الأصلية.
الآن أنت تعرف كيفية تمديد صورة الخلفية على الكتلة بأكملها. يمكنك استخدام هذه المعرفة لإنشاء تصميم فريد لصفحات الويب الخاصة بك أو تحسين مظهر العناصر الموجودة.
تحويل صورة الخلفية
- تغيير حجم الصورة
- تعيين الخلفية للكتلة
- التحكم في موضع الصورة
- سؤال وجواب
- تحويل صورة الخلفية
هناك عدة طرق لإنشاء تأثير تمديد صورة الخلفية على الكتلة بأكملها.
حجم الخلفية: غطاء;
تسمح لك هذه الخاصية بتمديد الصورة بحيث تغطي خلفية الكتلة بالكامل ، مع الحفاظ على النسب. إذا لم تملأ الصورة الكتلة بالكامل ، فسيتم اقتصاصها.
حجم الخلفية: تحتوي على;
تسمح لك هذه الخاصية أيضا بتمديد الصورة على كامل مساحة الكتلة ، ولكن في هذه الحالة ستتناسب الصورة تماما مع الكتلة دون الاقتصاص. إذا كانت الصورة غير مناسبة ، فسيتم تقليلها بحيث تتناسب تماما مع الكتلة.
الخلفية-كرر: لا-كرر;
تمنع هذه الخاصية صورة الخلفية من التكرار أفقيا وعموديا. بهذه الطريقة ، سيتم عرض الصورة مرة واحدة ولن تتكرر.
الخلفية-المنصب: المركز;
تسمح لك هذه الخاصية بتعيين الوضع الأفقي والرأسي لصورة الخلفية. تركز قيمة" المركز " الصورة على كلا المحورين.
سيؤدي تطبيق هذه الخصائص إلى إنشاء تأثير تمديد صورة الخلفية وجعلها مناسبة لأي حجم كتلة.
تغيير حجم الصورة
يمكن تغيير حجم الصورة لتتناسب بشكل أفضل مع الكتلة أو الحاوية المطلوبة. هناك عدة طرق لتغيير حجم صورة في هتمل.
باستخدام سمات العرض والارتفاع: يمكنك تعيين قيم محددة لعرض الصورة وارتفاعها بالبكسل. فمثلا: .
- باستخدام أنماط كس: يمكنك تطبيق خصائص العرض والارتفاع إلى عنصر مع صورة. فمثلا:.
- تغيير الحجم النسبي: للحفاظ على نسب الصورة عند تغيير الحجم ، يمكنك تعيين قيمة مقاسة واحدة فقط (العرض أو الارتفاع) ، وسيتم حساب القيمة المقاسة الثانية تلقائيا. على سبيل المثال: أو .
- تغيير حجم التكيف والاستجابة: لكي تتغير الصورة تلقائيا اعتمادا على حجم الشاشة أو الكتلة ، يمكنك استخدام تقنيات خاصة للتخطيط التكيفي والمتجاوب.
- يعتمد اختيار طريقة تغيير حجم الصورة على المتطلبات المحددة للمشروع والسياق الذي سيتم استخدام الصورة فيه.
تعيين الخلفية للكتلة
غالبا ما يواجه مطورو الويب مهمة تعيين الخلفية للكتلة. يمكن أن تكون الخلفية بلون خالص أو تدرج أو صورة. في هذا القسم ، سننظر في طرق مختلفة لتخصيص الخلفية للكتلة.
خلفية أحادية اللون
أسهل طريقة لتعيين خلفية أحادية اللون لكتلة هي استخدام خاصية كس
حدد عنصر كتلة ، على سبيل المثال ، باستخدام محدد
- إضافة خاصية
- قم بتعيين قيمة اللون ، على سبيل المثال,
- .بلوك {
لون الخلفية: أحمر;
}
خلفية متدرجة
تسمح لك خلفية التدرج بإنشاء انتقال سلس من لون إلى آخر. يمكنك استخدام خاصية كس لتخصيص خلفية التدرج
.بلوك {
صورة الخلفية: التدرج الخطي (إلى اليمين ، الأزرق ، الأخضر);
}
صورة الخلفية
لتعيين صورة الخلفية لكتلة ، تحتاج إلى استخدام خاصية كس
.بلوك {
الخلفية-صورة: رابط (الخلفية.جي بي جي);
}
يمكنك أيضا ضبط موضع صورة الخلفية باستخدام خاصية كس
.بلوك {
الخلفية-صورة: رابط (الخلفية.جي بي جي);
الخلفية-المنصب: المركز;
}
هذه ليست سوى بعض خيارات تخصيص الخلفية للكتلة. باستخدام كس ، يمكنك إنشاء مجموعة واسعة من الآثار والجمع بين خصائص مختلفة لتحقيق النتيجة المرجوة.
التحكم في موضع الصورة
يمكن التحكم في موضع صورة الخلفية باستخدام خاصية موضع الخلفية. تتيح لك هذه الخاصية تحديد موضع الصورة بالنسبة للحاوية الخاصة بها.
يتم تعيين قيمة خاصية موضع الخلفية بقيمتين مفصولتين بمسافة. تشير القيمة الأولى إلى الوضع الأفقي للصورة ، وتشير القيمة الثانية إلى الوضع الرأسي. يمكنك استخدام وحدات قياس مختلفة ، مثل وحدات البكسل (بكسل) أو النسب المئوية ( ٪ ) أو الكلمات الرئيسية (أعلى ، أسفل ، يسار ، يمين).
فيما يلي بعض الأمثلة على استخدام خاصية موضع الخلفية:
موضع الصورة في الزاوية اليسرى العليا:
- الخلفية-الموضع: أعلى اليسار;
- الخلفية-الموضع: أعلى اليمين;
- الخلفية-الموقف: مركز الأعلى;
- الخلفية-الوظيفة: مركز المركز;
- الخلفية-الموضع: أسفل المركز;
- الخلفية-الموضع: أسفل اليسار;
- الخلفية-الموضع: أسفل اليمين;
سؤال وجواب