اذهب إلى المحتوى
  • 0

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

Jalal Himami

السؤال

لا استطيع اظهار شفافية اللون إلا اذا كان مكتوبا بصيغة RGB ولكنني اريد ان اظهر شفافية للون وهو بصيغة اسم اللون فكيف يمكنني فعل هذا؟

h1{
    color: rgb(12, 87, 145);
    background-color: cadetblue a0.5;
    
}

 

index css jop1.html

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لإضافة شفافية إلى اللون في 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% */
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن تغيير شفافية الألوان في 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 إلى اسم اللون وستظهر لك هذه القائمة2023-07-09122617.png.8cb8459e9a6e006fe294c65758c39172.png
  • قم بالضغط على كلمة rgb وسيتم تحويل اللون إلى rgb
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

Snag_148b1bc9.thumb.png.8ccf477fb906ffbd5d6359c5b557cf74.png

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

rgb(0, 0, 0)

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

rgb(0, 0, 0, 0.5)

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

2023-07-09_12-38-13.png.f69cccba6db4227f08a4cdcf93d96c3e.png

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن استخدام طرق متعددة لتعيين شفافية اللون في 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>

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

إذا كنت ترغب في استخدام شفافية اللون باستخدام اسم اللون بدلاً من قيم 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٪.

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

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

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...