تطوير الويب لا يقف ساكنا ، وتظهر متطلبات وفرص جديدة كل يوم. ومع ذلك ، ظلت بعض المهام ذات صلة لسنوات عديدة. تتمثل إحدى هذه المهام في تعتيم الصورة على صفحة الويب. يستخدم هذا التأثير على نطاق واسع لخلق تأثيرات جمالية ووظيفية.
في كس ، هناك عدة طرق يمكنك من خلالها تعتيم الصورة. تعمل هذه الأساليب على مستويات مختلفة من التعقيد ومناسبة لمواقف مختلفة. في هذه المقالة ، سنلقي نظرة على 5 طرق بسيطة وفعالة تسمح لك بالحصول على النتيجة المرجوة بسرعة وسهولة.
الطريقة الأولى هي استخدام خاصية التصفية ، والتي تسمح لك بتطبيق أنواع مختلفة من المرشحات على عنصر ما. لتغميق الصورة ، يمكننا استخدام مرشح بتشبع لوني بنسبة -100 ٪ ، مما يؤدي إلى غياب كامل للون ، ونتيجة لذلك ، إلى تعتيم الصورة.
الطريقة الثانية هي استخدام العنصر الزائف:: بعد وخاصية التعتيم. يمكننا إنشاء عنصر زائف أعلى الصورة ، وتطبيق خلفية سوداء بشفافية عليها ، ثم تعيين درجة التعتيم المطلوبة باستخدام قيمة التعتيم.
- باستخدام عنصر زائف:: بعد
- تغيير الشفافية باستخدام خاصية التعتيم
- باستخدام المغلق: مرشح طمس
- إضافة طبقة ذات شفافية عبر خاصية لون الخلفية
- باستخدام التدرج المغلق لتطبيق سواد
- سؤال وجواب
- كيف يمكنني تعتيم صورة في المغلق?
- كيف يمكنني تلقي بظلالها على صورة باستخدام خاصية` تصفية 'و` سطوع ()' وظيفة?
- كيف يمكنني تعتيم صورة باستخدام خاصية` التعتيم'?
باستخدام عنصر زائف:: بعد
طريقة أخرى لتغميق صورة في كس هو استخدام العنصر الزائف ::بعد. تتيح لك هذه الطريقة إضافة طبقة إضافية أعلى الصورة وتغيير شفافيتها باستخدام خاصية العتامة.
أولا ، تحتاج إلى إنشاء حاوية للصورة وتطبيق فئة كس المناسبة لذلك. على سبيل المثال:
ثم ، في كس ، يمكنك استخدام العنصر الزائف:: بعد لإنشاء طبقة إضافية فوق الصورة وتعيين خصائصه:
.صورة حاوية {
موضع: نسبي;
}
.صورة حاوية:: بعد {
المحتوى: "";
موضع: مطلق;
أعلى: 0;
اليسار: 0;
العرض: 100%;
الارتفاع: 100%;
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
التعتيم: 0.5;
}
في هذا المثال ، يتم إنشاء عنصر زائف:: بعد لحاوية مع فئة "صورة حاوية". لديها تحديد المواقع المطلقة وتحتل كامل مساحة الحاوية. يتم تعيين لون الخلفية عبر خاصية لون الخلفية باستخدام وظيفة رغبا () ، حيث تحدد المعلمة الأخيرة شفافية الطبقة. في هذه الحالة ، ستكون الطبقة شفافة بمستوى شفافية 0.5. لتحقيق هذه الشفافية ، يتم استخدام خاصية التعتيم.
نتيجة لتطبيق العنصر الزائف:: بعد الحاوية مع الصورة ، سيتم إنشاء طبقة مظلمة مع الشفافية المحددة عليها. هذا يسمح لك لتحقيق تأثير سواد دون تغيير الصورة الأصلية.
تغيير الشفافية باستخدام خاصية التعتيم
خاصية التعتيم في كس يسمح لك بتغيير شفافية عنصر. يمكن أن تتراوح قيمة هذه الخاصية من 0 إلى 1 ، حيث يعني 0 عنصرا شفافا تماما و 1 يعني عنصرا معتما تماما.
يمكن أن يكون تطبيق خاصية التعتيم مفيدا إذا كنت تريد إضافة تأثير تعتيم إلى صورة أو خلفية عنصر.
مثال على استخدام خاصية التعتيم:
في هذا المثال ، نقوم بإنشاء حاوية مع فئة" تراكب " ووضع صورة داخلها. ثم ، باستخدام كس ، وضعنا شفافية الصورة ، وتحديد قيمة خاصية التعتيم إلى 0.5.
وبالتالي ، ستكون الصورة مرئية ، ولكن بتأثير مظلم ، مما سيخلق تأثيرا مرئيا مثيرا للاهتمام.
عند استخدام خاصية التعتيم ، ضع في اعتبارك أنها تؤثر أيضا على جميع العناصر الفرعية داخل العنصر المحدد. إذا كنت ترغب في تطبيق الشفافية فقط على الصورة وليس على بقية العناصر داخل الحاوية ، يمكنك استخدام طرق أخرى لتغيير الشفافية ، مثل استخدام العناصر الزائفة أو خاصية الخلفية رغبا() بدلا من خاصية التعتيم.
باستخدام المغلق: مرشح طمسطريقة واحدة لتغميق صورة في كس هو استخدام مرشح طمس. يطبق هذا الفلتر ضبابية على العنصر ، مما يخلق تأثير طمس الصورة.
لاستخدام مرشح التمويه في كس ، تحتاج إلى تطبيقه على العنصر الذي يحتوي على الصورة. على سبيل المثال:
ثم يمكنك إنشاء فئة كس لعنصر الصورة وتطبيق عامل التصفية المحدد عليه:
.صورة غير واضحة {
مرشح: طمس (5 بكسل);
}
في المثال أعلاه ، يتم تطبيق مرشح التمويه بقيمة 5 بكسل. يمكنك ضبط القيمة للحصول على تأثير التمويه المطلوب.
ومع ذلك ، تجدر الإشارة إلى أن مرشح التمويه يمكن أن يكون له تأثير على الأداء ، خاصة مع قيم التمويه الكبيرة. لذلك ، يوصى باستخدامه بحذر والتحقق من تأثيره على أداء موقع الويب الخاص بك.
إضافة طبقة ذات شفافية عبر خاصية لون الخلفية
هناك طريقة أخرى لتغميق صورة في كس وهي إضافة طبقة ذات لون شفاف من خلال خاصية لون الخلفية. للقيام بذلك ، استخدم مجموعة من القيم رغبا (الأحمر والأخضر والأزرق ، ألفا).
قناة ألفا هي قيمة من 0 إلى 1 ، حيث تعني 0 طبقة شفافة تماما و 1 تعني طبقة غير شفافة تماما.
مثال على الكود:
.الخلفية {
الخلفية-صورة: رابط ('صورة.جي بي جي);
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
}
في هذا المثال ، سيتم تعتيم الصورة باستخدام طبقة من الأسود الشفاف(رغب (0 ، 0 ، 0)) مع قيمة ألفا من 0.5. ستعتمد النتيجة على لون عنصر الخلفية ومدى شفافية قيمة قناة ألفا المحددة.
تتيح لك هذه الطريقة إنشاء تأثير سواد دون استخدام عناصر إضافية على الصفحة ، ولكن لها بعض القيود. على سبيل المثال ، لا يمكن تطبيق هذه الطريقة على صورة ذات خلفية شفافة ، لأن لون الطبقة سيكون مرئيا من خلال مناطق شفافة من الصورة.
بالإضافة إلى ذلك ، يمكن لهذه الطريقة أيضا تغيير ألوان الصورة ، حيث يتم فرض طبقة ذات شفافية أعلى الصورة. لذلك ، قبل استخدام هذه الطريقة ، من المهم اختبارها في متصفحات مختلفة والتأكد من أنها تلبي متطلبات التصميم.باستخدام التدرج المغلق لتطبيق سواد
طريقة أخرى لإنشاء سواد في صورة باستخدام كس هو استخدام التدرجات. تتيح لك هذه الطريقة تخصيص التأثير بشكل أكثر مرونة ، بالإضافة إلى إضافة انتقالات ومجموعات ألوان مختلفة.
أولا ، تحتاج إلى إنشاء حاوية للصورة:ثم أضف أنماطا للحاوية والصورة:
.صورة حاوية {
موضع: نسبي;
العرض: 300 بكسل;
الارتفاع: 200 بكسل;
تجاوز: مخفي;
}
.صورة حاوية إمغ {العرض: 100%;
الارتفاع: 100%;
كائن صالح: غطاء;
}
Теперь добавим градиент поверх изображения:
.صورة حاوية:: قبل {
المحتوى: "";
موضع: مطلق;
أعلى: 0;
اليسار: 0;
العرض: 100%;
الارتفاع: 100%;
الخلفية صورة: الخطي التدرج (رغبا(0, 0, 0, 0.5), رغبا(0, 0, 0, 0.5));
}
.صورة حاوية:: بعد {
المحتوى: أتر (شرح البيانات);
موضع: مطلق;
أسفل: 0;
اليسار: 0;
العرض: 100%;
الحشو: 10 بكسل;
اللون: أبيض;
وزن الخط: غامق;
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
}
Теперь у нас есть затемнение на изображении. Мы использовали псевдоэлемент ::قبل إنشاء طبقة تغطية مع التدرج. استخدمنا أيضا:: بعد لإضافة تعليق على الصورة. وبالإضافة إلى ذلك ، استخدمنا وظيفة رغبا() لضبط الشفافية واللون سواد.
وبالتالي ، فإن استخدام التدرج المغلق يوفر طريقة مرنة لتطبيق التعتيم على الصورة ، مع القدرة على ضبط الشفافية والتدرج اللوني. تتيح لك هذه الطريقة إنشاء أغلفة مذهلة وأنيقة لمواقع الويب والمدونات.
سؤال وجواب