كيفية تغيير شفافية الالوان في CSS

لإضافة شفافية إلى اللون في css، لا يمكنك استخدام الأسماء مثل red. بدلاً من ذلك، يجب عليك استخدام وظائف الألوان التي تقبل قيمة الشفافية كمعامل رابع. هذه الوظائف هي rgba و hsla . على سبيل المثال:

color: rgba (255, 0, 0, 0.5); /* هذا يعني أحمر شفاف بنسبة 50% */

color: hsla (0, 100%, 50%, 0.5); /* هذا يعني نفس اللون بتنسيق مختلف */

يمكنك أيضًا استخدام تنسيق سداسي عشري مع ثمانية أرقام لتحديد اللون والشفافية معًا. على سبيل المثال:

color: #ff000080; /* هذا يعني نفس الشيء مثل rgba (255, 0, 0, 0.5) */

إذا أردت إضافة شفافية إلى العنصر بأكمله وليس فقط إلى اللون، فيمكنك استخدام خاصية opacity. على سبيل المثال:

div {
  color: red;
  opacity: 0.5; /* هذا يجعل العنصر بأكمله شفاف بنسبة 50% */
}

الامر صعب قليلا , لأنه لا اعرف احداثيات الالوان بشكل دقيق, على سبيل المثال: اللون الذي يدعىcadetblue الذي وضعته في الكود الذي ارسلته اريد ان اظهر له شفافية, ولكن لا اعرف ما هي احداثياته حتى اكتبه بصيغة احداثيات لكي اتمكن من وضع شفافية له.

يمكن تغيير شفافية الألوان في CSS باستخدام القيمة opacity أو rgba.

باستخدام القيمة opacity:

يمكنك تعيين قيمة opacity للعنصر الذي تريد تغيير شفافيته بين 0 و 1، حيث 0 يعني عدم وجود شفافية و 1 يعني شفافية كاملة. يمكن استخدام القيم المتوسطة لتحسين شفافية الألوان.

.my-element {
  opacity: 0.5; /* 50% شفافية */
}

باستخدام القيمة rgba:

يمكنك استخدام القيمة rgba لتعيين قيمة شفافية مع اللون الذي تريده. تحتوي قيمة rgba على أربعة مكونات: قيمة الأحمر والأخضر والأزرق (RGB) وقيمة الشفافية (A). يمكن تعيين قيمة الشفافية بين 0 و 1.

.my-element {
  background-color: rgba(255, 0, 0, 0.5); /* اللون الأحمر مع 50% شفافية */
}

بتاريخ 2 ساعة قال Jalal Himami:

الامر صعب قليلا , لأنه لا اعرف احداثيات الالوان بشكل دقيق, على سبيل المثال: اللون الذي يدعىcadetblue الذي وضعته في الكود الذي ارسلته اريد ان اظهر له شفافية, ولكن لا اعرف ما هي احداثياته حتى اكتبه بصيغة احداثيات لكي اتمكن من وضع شفافية له.

ولكن لا أحد يتذكر ال rgba لذلك لا تحتاج للبحث عنه فقط

• قم بكتابة اسم اللون في محرر الأكواد vs code مثلاً 
• ثم قم بتوجيه الmouse إلى اسم اللون وستظهر لك هذه القائمة
• قم بالضغط على كلمة rgb وسيتم تحويل اللون إلى rgb

بتاريخ 2 ساعة قال Jalal Himami:

الامر صعب قليلا , لأنه لا اعرف احداثيات الالوان بشكل دقيق, على سبيل المثال: اللون الذي يدعىcadetblue الذي وضعته في الكود الذي ارسلته اريد ان اظهر له شفافية, ولكن لا اعرف ما هي احداثياته حتى اكتبه بصيغة احداثيات لكي اتمكن من وضع شفافية له.

الأمر بسيط وهناك عدة طرق للتحويل بين قيم الألوان المختلفة، وفي vscode مثلاً عند الوقوف بمؤشر الفأرة على اللون ستظهر لك نافذة، وعند الضغط على الشريط العلوي بها الذي يحمل قيمة اللون سيتم التحويل بين قيم الألوان المختلفة لنفس اللون، فقم بالضغط حتى تصل لقيمة rgb.

ثم تستطيع التعديل عليها لإضافة قيمة a بها وهي قيمة الشفافية، مثلاً اللون الأسود في RGB هو كالتالي:

rgb(0, 0, 0)

ولإضافة شفافية سنضيف قيمة رابعة في النهاية وتتراوح قيمتها ما بين 0 و 1 وأنا سأضيف 0.5 كالتالي:

rgb(0, 0, 0, 0.5)

وأيضًا هناك طريقة للتغيير بين قيم الألوان من خلال أدوات المطور في المتصفح كالتالي:

وأيضًا تستطيع استخدام أداة خاصة بذلك مثل الأداة التالية:

• https://www.cssportal.com/css-color-converter/

يمكن استخدام طرق متعددة لتعيين شفافية اللون في CSS. إليك بعض الطرق الشائعة:

• استخدام قيمة rgba: يمكنك استخدام الوظيفة rgba لتعيين لون مع قيمة ألفا (شفافية). يتم تحديد الألفا بين 0 و 1، حيث يكون 0 غير شفاف و 1 غير شفاف. مثال:

background-color: rgba(0, 0, 0, 0.5); /* أسود مع شفافية 50٪ */

• استخدام قيمة hsla: تشبه وظيفة rgba ولكنها تستخدم قيمة اللون في نموذج HSL (صبغة، تشبع، سطوع) بدلاً من نموذج RGB. يمكن تحديد الشفافية بنفس الطريقة باستخدام قيمة ألفا. مثال:

background-color: hsla(240, 100%, 50%, 0.5); /* أزرق مع شفافية 50٪ */

• استخدام قيمة transparent: يمكنك استخدام القيمة transparent لتعيين اللون كمستوى شفافية كاملة. مثال:

background-color: transparent; /* شفاف بالكامل */

• استخدام خاصية opacity: يمكنك استخدام خاصية opacity لتعيين مستوى شفافية للعنصر بأكمله بما في ذلك المحتوى. تؤثر هذه الخاصية على العنصر وجميع عناصره الفرعية. قيمة الشفافية هي رقم بين 0 و 1، حيث يكون 0 غير شفاف و 1 غير شفاف. مثال:

opacity: 0.5; /* شفافية 50٪ */

نوع البيانات <color>

إذا كنت ترغب في استخدام شفافية اللون باستخدام اسم اللون بدلاً من قيم RGB، يمكنك استخدام قيمة الشفافية (opacity) في CSS بدلاً من القيمة alpha (a) التي تستخدمها مع RGB.

قم بتعديل قاعدة الأنماط الخاصة بك كما يلي:

h1 {
    color: rgb(12, 87, 145);
    background-color: rgba(95, 158, 160, 0.5);
}

في الكود أعلاه، تم استخدام rgba بدلاً من cadetblue لتحديد لون الخلفية. قمنا بإضافة القيمة 0.5 بعد القيم RGB، وهي تمثل الشفافية حيث تتراوح قيمتها بين 0 و 1. قيمة 0 تعني شفافية كاملة (غير مرئي)، في حين أن قيمة 1 تعني عدم وجود شفافية (مرئي بشكل كامل).

باستخدام القيمة 0.5 في المثال أعلاه، ستحصل على لون الخلفية "cadetblue" مع شفافية تبلغ 50٪.

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