الشيء الرئيسي هو تحديد الصورة على جهاز الكمبيوتر الخاص بك أو الهاتف، ثم انقر فوق موافق في أسفل هذه الصفحة. افتراضيًا، يتم استبدال الخلفية العادية للصورة بخلفية شفافة. يتم تحديد لون خلفية الصورة الأصلية تلقائيًا؛ ما عليك سوى تحديد اللون الذي تريد استبداله به في الإعدادات. المعلمة الرئيسية التي تؤثر على جودة الاستبدال هي "كثافة الاستبدال" ويمكن أن تكون مختلفة لكل صورة.
مثال على صورة وردة وردية بدون تغييرات وبعد استبدال الخلفية العادية بخلفية شفافة وبيضاء وخضراء:
المثال الأولمع زهرة الورد على خلفية شفافة مصنوعة بالإعدادات التالية:
1) كثافة الاستبدال - 38؛
2) التنعيم على طول الحواف - 5؛
3) استبدل الخلفية العادية بأخرى شفافة؛
4) التشذيب (<0) или Добавление (>0) عند الحواف - "-70"؛
5) عكس - معطل (غير محدد).
من أجل الخلق المثال الثاني، بخلفية بيضاء، تم استخدام نفس الإعدادات كما في المثال الأول، باستثناء المعلمة: "استبدال الخلفية العادية بـ" - الأبيض. في المثال الثالث، مع خلفية خضراء، يتم استخدام الإعدادات أيضًا كما في المثال الأول، باستثناء المعلمة: "اللون بتنسيق سداسي عشري" - #245a2d.
لم يتم تغيير الصورة الأصلية بأي شكل من الأشكال. سيتم تزويدك بصورة أخرى تمت معالجتها بخلفية شفافة أو محددة.
في بعض الحالات، على سبيل المثال، عند تصميم موقع ويب، قد تواجه موقفًا حيث لا تتطابق خلفية الصورة بأي حال من الأحوال مع لون موقع الويب نفسه. الحل الواضح هو جعل هذه الخلفية شفافة.
سوف تحتاج
تعليمات
كيفية ضبط اللون الشفاف في CSS؟ حاليا هناك 3 طرق للقيام بذلك.
الطريقة الأولى - قيمة شفافة
إذا قمت بتعيين قيمة النص أو لون الخلفية إلى شفاف، فسيكون اللون شفافًا تمامًا، أي غير مرئي. مثال:
اللون: شفاف؛
لن يكون هذا النص مرئيًا على الصفحة.
الطريقة الثانية - وضع الألوان rgba
وهذا ابتكار CSS3. في السابق، لم يكن هناك مثل هذا الوضع في تطوير الويب، ولم يكن هناك سوى RGB. بالتأكيد أنت تعرف كيفية تسجيل اللون بهذا التنسيق. للقيام بذلك، تحتاج إلى تحديد ثلاث قيم بين قوسين من 0 إلى 255، للإشارة إلى تشبع أحد الألوان الأساسية الثلاثة (الأحمر، الأخضر، الأزرق). على سبيل المثال:
الخلفية: rgb(230, 121, 156);
لا يختلف تنسيق rgba، فهو يضيف فقط قيمة رابعة - درجة شفافية العنصر من 0 إلى 1. بشكل عام، يُستخدم تنسيق التسجيل هذا بشكل أساسي لتعيين لون شفاف، وليس شفافًا تمامًا. لتحقيق الشفافية الكاملة، ما عليك سوى كتابة 0 كقيمة رابعة.
الخلفية: rgba(0, 0, 0, 0);
في هذه الحالة، لا تلعب الأرقام الثلاثة المتبقية دورًا خاصًا.
يمكن تعيين اللون الشفاف إذا تم تعيين المعلمة الرابعة على قيمة من 0.01 إلى 0.99. لقد كتبت بالفعل قليلاً عن ضبط الشفافية للخلفية، يمكنك قراءتها إذا كنت مهتمًا.
الطريقة الثالثة - التعتيم
خاصية أخرى من تكنولوجيا CSS3. لكني أريد أن أحذرك على الفور من أن الأمر يعمل بشكل مختلف قليلاً. تقوم العتامة بتعيين شفافية الكتلة بأكملها التي يتم تطبيقها عليها. وبالتالي تتدهور إمكانية قراءة النص وإدراك الصور. لذلك أرى فائدة استخدام هذه الخاصية فقط للكتل التي لا تحتوي على نص أو أي معلومات أخرى. يمكن ضبط القيم من 0 إلى 1، كما هو الحال مع المعلمة الرابعة عند تحديد لون بتنسيق rgba.
بشكل عام، على هذه اللحظةهذه هي كل الطرق التي أعرفها لتعيين لون شفاف في CSS. لماذا هذا مطلوب هو سؤال آخر. خلال خلفية شفافةما هو تحت يمكن رؤيته. في بعض الأحيان يجب أن يتم ذلك بهذه الطريقة حسب التصميم. بشكل عام، تقنية الشفافية شائعة جدًا اليوم.
خلفية شفافة
كما تعلم، الخلفية هي خاصية CSS تسمح لك بتعيين لون الخلفية أو تحميل صورة لتكون بمثابة الخلفية.
ضبط الشفافية لخلفية CSS
لذلك، كل هذا يتم بكل بساطة بفضل تنسيق تسجيل ملون مثل rgba. إذا كنت تعمل مع محرري الرسوم البيانية، فربما تعلم أن وضع الألوان rgb يرمز إلى ما يلي: نسبة اللون الأحمر (الأحمر)، ونسبة اللون الأخضر (الأخضر) والأزرق (الأزرق). لذا، فإن rgba هو نفسه تقريبًا، تتم إضافة معلمة واحدة فقط - الشفافية. هو مكتوب مثل هذا:
لون الخلفية: rgba (173، 57، 22، 0.5)
أولاً نشير بوضوح إلى أننا نقوم بتعيين اللون في وضع rgba. ثم نشير إلى قيم تشبع الألوان الأساسية الثلاثة من 0 إلى 255، حيث 255 هو أعلى تشبع. المعلمة الرابعة هي شفافيتنا. يتم كتابة القيمة من 0 إلى واحد هنا. 1 عنصر معتم تمامًا، و0 عنصر شفاف تمامًا. وبناء على ذلك، إذا قمت بضبطه على 0، فلن يكون لون الخلفية مرئيا على الإطلاق.
الآن أنت تعرف كيفية ضبط خاصية الخلفية على الشفافية في CSS. للقيام بذلك تحتاج إلى استخدام وضع الألوان rgba. هناك أيضًا خاصية العتامة، ولكنها تنطبق على العنصر بأكمله. أي أنه عند تطبيق العتامة، يمكن تطبيق الشفافية على النص، مما يجعله غير قابل للقراءة.
مثال على خلفية شفافة
مزايا خلفية شفافةمن السهل أن تظهر مع مثال. على سبيل المثال، لدينا خلفية عامة للصفحة. هذا هو الشكل الذي ستبدو عليه الكتلة إذا تم إعطاؤها لونًا أسود خالصًا:
لنقم الآن بتعيين نفس اللون الأسود للكتلة، ولكن حدده باستخدام تنسيق الألوان rgba، مع تحديد القيمة الأخيرة بـ 0.7، على سبيل المثال. سوف يتحول مثل هذا: 
الآن أصبحت خلفية الكتلة مرئية من خلالها وصورة الخلفية مرئية من خلالها. هذه الصورة والخلفية على سبيل المثال فقط. كما يمكنك أن تتخيل، يمكن أن تكون شفافية الخلفية في CSS مفيدة عندما تريد أن تظهر خلفية عنصر متداخل دون حجب الخلفيات الأخرى الموجودة في طبقات أخرى.
ضبط اللون نفسه باستخدام rgba ليس بالأمر الصعب. كما سبق أن ذكرنا، فإن الأحرف الثلاثة الأولى تعني الألوان الأساسية الثلاثة: الأحمر والأخضر والأزرق، أو بالأحرى حصتها (من 0 إلى 255). من خلال تعيين قيم مختلفة، يمكنك الحصول على ملايين الألوان المختلفة، وستسمح لك الشفافية بالحصول على المزيد من الألوان تأثيرات جميلةللموقع إذا لزم الأمر.
تحميل...