يسعى مصممو الويب دائما إلى جعل مواقعهم الإلكترونية أكثر جمالية وفريدة من نوعها. طريقة واحدة لتحقيق ذلك هي استخدام خلفية شبه شفافة في الصور. يمكن أن يخلق هذا تأثيرا مثيرا للاهتمام وجذابا سيساعدك على التميز عن المواقع الأخرى.
إذا كنت تريد أن تتعلم كيفية ضبط خلفية شفافة إلى صورة ، وسوف تحتاج إلى بعض المعرفة الأساسية من هتمل و كس. في هذا الدليل ، سننظر في الخطوات الأساسية اللازمة لتحقيق التأثير المطلوب.
ستكون الخطوة الأولى هي تحديد الحاوية التي تحتوي على الصورة التي نريد تطبيق خلفية شفافة عليها. للقيام بذلك ، يمكننا استخدام علامة
مع معرف فريد. على سبيل المثال:
- ثم يمكننا تعيين نمط لهذه الحاوية باستخدام كس. يمكننا استخدام خاصية الخلفية لتراكب خلفية شبه شفافة. على سبيل المثال ، لإنشاء خلفية شبه شفافة باستخدام اللون ، يمكننا استخدام خاصية رغبا ، حيث تحدد المعلمة الأخيرة الشفافية. على سبيل المثال:
- ما هي خلفية شفافة?
- طرق تطبيق خلفية شفافة على صورة
- الطريقة 1: استخدام خاصية لون الخلفية المغلق
الطريقة 2: استخدام خاصية التعتيم المغلق
أمثلة على استخدام خلفية شفافة في صورة
مثال 1: إنشاء تأثير المنظر
ما هي خلفية شفافة?
الخلفية الشفافة هي تأثير تخترق فيه صورة الخلفية أو اللون جزئيا العناصر الموجودة فوقها. في الوقت نفسه ، لا تتداخل العناصر تماما مع الخلفية ، ولكنها تسمح للخلفية بالتألق من خلال نفسها.
يمكن استخدام خلفية شبه شفافة لإنشاء تأثيرات بصرية مثيرة للاهتمام على صفحات الويب. يسمح لك بإضافة العمق والتعقيد إلى التصميم ، وكذلك تحسين قابلية قراءة النص أو الإدراك البصري للصورة.
لإنشاء خلفية شبه شفافة على صفحات الويب ، يمكنك استخدام الشفافية (أو قناة ألفا) في كس باستخدام خاصية التعتيم. يمكن أن تتراوح قيمة خاصية التعتيم من 0 إلى 1 ، حيث يكون 0 شفافا تماما و 1 معتما تماما.
بالإضافة إلى ذلك ، يمكن إنشاء خلفية شبه شفافة باستخدام الصور ومحرري الصور. لهذا الغرض ، يتم استخدام الصور مع قناة ألفا (صور بابوا نيو غينيا) ، حيث يتم تحديد الشفافية من قبل بكسل الصورة.
- الخلفية الشفافة هي أداة قوية لإنشاء محتوى مرئي وتصميم صفحة ويب. انها تسمح لك لتحقيق تأثيرات مثيرة للاهتمام وخلق نمط موقع فريد من نوعه.
- طرق تطبيق خلفية شفافة على صورة
- هناك عدة طرق لتطبيق خلفية شفافة على الصورة. وفيما يلي بعض منها:
باستخدام خاصية لون الخلفية المغلق: لهذه الطريقة ، تحتاج إلى إنشاء حاوية منفصلة للخلفية وتعيينها اللون المطلوب باستخدام خاصية لون الخلفية. ثم ضع الصورة داخل الحاوية باستخدام خاصية صورة خلفية كس.
باستخدام خاصية التعتيم المغلق: تتيح لك هذه الطريقة تغيير شفافية العنصر بأكمله ، بما في ذلك الصورة الموجودة بداخله. للقيام بذلك ، قم بتعيين قيمة خاصية العتامة في النطاق من 0 إلى 1 ، حيث يكون 0 عنصرا شفافا تماما و 1 عنصرا معتما تماما.
باستخدام خاصية كس رغبا: تسمح لك هذه الطريقة بتعيين لون الخلفية بشفافية. للقيام بذلك ، استخدم وظيفة رغبا ، والتي تأخذ أربعة معلمات: قيم الأحمر والأخضر والأزرق في النطاق من 0 إلى 255 ، فضلا عن قيمة الشفافية في النطاق من 0 إلى 1.
يعتمد اختيار الطريقة على متطلبات المشروع وتفضيلات المطور. كل طريقة لها خصائصها الخاصة ويمكن استخدامها في مواقف مختلفة.
الطريقة 1: استخدام خاصية لون الخلفية المغلق
الخطوة 1: افتح محرر كود أو محرر نصوص لبدء إنشاء صفحة بها صورة وخلفية شبه شفافة.
الخطوة 2: قم بإنشاء ترميز هتمل يحتوي على صورتك. على سبيل المثال:
الخطوة 3: إنشاء نمط كس لحاوية الصورة. اضبط خلفية الحاوية كلون شفاف باستخدام خاصية لون الخلفية وأضف خصائص أخرى حسب الرغبة. على سبيل المثال:
.حاوية {
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
الحشو: 20 بكسل;
}
}
أضف نمطا لفئة "الخلفية" ، حيث تقوم بتعيين لون الخلفية والشفافية:
.الخلفية {
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0.5);
التعتيم: 0.5;
}
نتيجة لتطبيق خاصية التعتيم ، سيصبح العنصر الذي يحتوي على فئة" الخلفية " شفافا ، مما يعني أن النص والصورة في الخلفية سيصبحان مرئيين من خلاله.
باستخدام هذه الطريقة ، يمكنك إنشاء تأثيرات مختلفة ودمجها مع أنماط أخرى للحصول على النتيجة التي تحتاجها.
أمثلة على استخدام خلفية شفافة في صورة
يمكن أن تكون الخلفية الشفافة في الصورة مفيدة في مواقف مختلفة. يسمح لك بإنشاء حلول تصميم مثيرة للاهتمام ومذهلة ، بالإضافة إلى تحسين إدراك المحتوى في الصورة.
فيما يلي بعض الأمثلة على استخدام خلفية شفافة في الصورة:
إبراز النص
يمكن استخدام خلفية شفافة لإبراز النص ، مما يجعله أكثر قابلية للقراءة على خلفية الصورة. على سبيل المثال ، إذا كانت الصورة تحتوي على الكثير من التفاصيل أو الألوان الزاهية ، فإن إضافة خلفية شفافة أسفل النص سيساعد في إبرازها وجعلها أكثر وضوحا.
خلق تأثير العمق
يمكن أن يساعد استخدام خلفية شبه شفافة في الصورة في إنشاء تأثير العمق والطبقات. على سبيل المثال ، يمكنك إضافة طبقة نص شبه شفافة إلى مقدمة الصورة لخلق شعور بأن النص في المقدمة والخلفية في الخلفية. هذا يمكن أن يجعل التصميم ديناميكيا ومثيرا للاهتمام.
إخفاء جزء من الصورة
يمكن استخدام خلفية شبه شفافة لإخفاء جزء من الصورة إذا كانت تتداخل مع إدراك المحتوى أو تخلق تأثير فوضى بصرية غير مرغوب فيه. على سبيل المثال ، إذا كانت الصورة تحتوي على جزء من الخلفية شديد السطوع أو مليء بالتفاصيل ، فيمكنك إضافة طبقة شفافة أعلى هذا الجزء لتنعيمها أو إخفائها.
هذه ليست سوى بعض الأمثلة على استخدام خلفية شفافة في الصورة. يمكن تنويع هذا التأثير ودمجه وتطبيقه اعتمادا على متطلبات التصميم والأهداف التي تريد تحقيقها.
مثال 1: إنشاء تأثير المنظر
يمكنك استخدام كس وجافا سكريبت لإنشاء تأثير المنظر على صفحة ويب. يضيف هذا التأثير إحساسا بالعمق والحركة إلى الصورة أثناء تمرير المستخدم عبر الصفحة.
أولا ، تحتاج إلى إضافة صورة خلفية إلى الصفحة:
ثم نقوم بتصميم صورة الخلفية:
.المنظر {
الخلفية-المنصب: المركز;