طبقة overlay بين الصور والكتابة باستخدام سطر واحد من CSS

لماذا نستخدم border-image كطبقة overlay؟

border-image هي خاصية في CSS ترسم صورة حول عنصر.

تعمل خاصية border-image بشكل جيد كـطبقة فاصلة لأنها تُرسم بين الخلفية والمحتوى، وهو المراد.

بناء الجملة لـ border-image

border-image: <source> <slice> / <width> / <outset> <repeat>;

قد تبدو هذه الصيغة معقدة لأنها اختصار لخمس خصائص، ولكن فقط border-image-source و border-image-slice هما المطلوبان لتحقيق تأثير التراكب.

استخدام border-image كـ overlay

لنرى كيفية انشاء هذا الغشاء باستخدام border-image لتحسين قابلية قراءة النص التالي:

أولاً، نحتاج إلى تعيين مصدر الحد. وهو الصورة التي نريد استخدامها كـ تراكب. لهذا، يمكننا استخدام تدرج لوني بسيط linear-gradient كصورة.

.overlay {
  border-image-source: linear-gradient(#0003, #0004);
}

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

للحصول على لون ثابت، كرر نفس اللون مرتين (على سبيل المثال، linear-gradient(red, red)).

أخيرًا، نحتاج إلى تحديد كيفية تقسيم الصورة. يمكن تقسيم الصورة إلى تسع مناطق لاستخدامها في الحدود. في هذه الحالة، نهتم فقط بالمنطقة الوسطى التي يمكن التحكم فيها باستخدام الكلمة المفتاحية fill مع استخدام 0 للمناطق الأخرى.

.overlay {
  border-image-source: linear-gradient(#0003, #0004);
  border-image-slice: 0 fill;
}

تعد خاصية border-image-slice معقدة وصعبة الشرح، لذا فأفضل طريقة لفهمها هي من خلال اللعب بهذه الأداة من MDN لفهمها بشكل أفضل.

الآن بعد أن أصبح التراكب يعمل، إليك مقارنة بين النص الموضوع على صورة خلفية مع وبدون تراكب. لاحظ كيف يعزز التراكب من قابلية قراءة النص ويوفر تباينًا واضحًا ضد الخلفية.

الكود النهائي

يمكننا دمج السطرين السابقين في سطر واحد باستخدام خاصية border-image المختصرة كما يلي:

.overlay {
	border-image: linear-gradient(#003, #0004) 0 fill;
}