كس خلفية الشفافية. خلفية شفافة أو نص باستخدام كس

مع ظهور CSS3، أصبح العمل من مصممي تخطيط أبسط بكثير وأكثر منطقية في نواح كثيرة: بعد كل شيء، يمكنك الآن حقا بمرونة تكوين كائن، وكلما أقل في كثير من الأحيان باستخدام جافا سكريبت. دعونا نقول تحتاج إلى ضبط الشفافية الخلفية - كس على الفور يقدم العديد من الخيارات.

يتم تعيين الخلفية من قبل مجموعة من السمات (خلفية الصورة، خلفية الموقف، حجم الخلفية، الخلفية تكرار، الخلفية مرفق، خلفية المنشأ، الخلفية كليب، لون الخلفية)، كل منها يمكن أن تكون مكتوبة بشكل منفصل أو مجتمعة تحت السمة الخلفية. دعونا نحلل كل واحد منهم بمزيد من التفصيل.

سمة خلفية اللون

في كس، يمكنك تحديد لون الخلفية بعدة طرق: استخدام التعليمات البرمجية الست عشرية أو اسم اللون أو سجل رغب. في CSS3، أصبح من الممكن استخدام الخيار رغبا بدلا من سجل رغب.

يتم كتابة رمز اللون الست عشري في الخاصية بعد الشبكة: باكغروند-كولور: # FFDAB9. إذا كانت الأحرف في نفس الإدخال مطابقة في أزواج، عادة ما يتم اختصار التعليمات البرمجية قليلا: # ccff00 يمكن أن تكون مكتوبة على النحو # cf0:

بودي {باكغروند-كولور: # cf0؛}.

الاسم هو حتى في الزهور الأكثر غرابة. على سبيل المثال، بالإضافة إلى المعيار الأحمر والأبيض، يمكنك استخدام نافاجوهيت (#FFDEAD) أو Honeydew2 (# E0EEE0):

بودي {باكغروند-كولور: بيربل؛}.

النسخة الأخيرة من رغب أو سجل رغبا يسمح لك لتحديد ليس فقط اللون، ولكن أيضا شفافية خلفية كس، ولكن الأسلوب يعمل في إي فقط على الإصدار 9. عادة ما تعترف المتصفحات الأخرى بالخيار مع الشفافية. من خلال معايير W3C، فمن الأفضل استخدام رغبا بدلا من رغب أكثر المعتاد.

القيمة الأخيرة ل رغبا وتعيين تعتيم الخلفية من 0 (شفاف) إلى 1 (معتم).

هناك بعض المعاني أكثر غرابة. يمكن تعيين لون الخلفية مع هسل و هسلا. تمت إضافة كلا إلى CSS3، وبالتالي إي غير معتمد أدناه الإصدار 9. الخيارات هي متطابقة مع رغب أو رغبا، إلا في شكل مختلف: هوى (هي هوى هي القيمة على عجلة الألوان، يتم تعيين في درجة)، ساتورات (شدة هي النسبة المئوية للون، في النسبة المئوية، 0-100)، الخفة (يتم قياس السطوع بنفس الطريقة التي المعلمة يشبع ).

سمة الخلفية-صورة

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

بودي { باكغروند-إيماج : ورل (bg1.png)، ورل (bg2.png)}.

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

سمة خلفية الموقف

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

بودي {باكغروند-بوسيتيون: رايت سينتر؛} - في هذا المثال، ستكون الخلفية على الجانب الأيسر من الصفحة، مع وضع الجزء السفلي من الصورة وأعلىها على الصورة نفسها.

سمة خلفية الحجم

أحيانا تريد استخدام كس لتمديد الخلفية أو تقليل حجمها. للقيام بذلك، استخدم حجم خلفية السمة، ويمكن تحديد حجم الخلفية بالبكسل أو النسب المئوية، وفي أي وحدات قياس أخرى.

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

سمة باكغروند-أتاشمنت

تحدد هذه السمة سلوك صورة الخلفية عند التمرير. لذلك، يمكن أن يستغرق 3 قيم (دون الأخذ بعين الاعتبار الوراثة، المشتركة لجميع السمات المعروضة في هذه المقالة):

• ثابت - يجعل صورة على خلفية ثابتة.
• التمرير - مخطوطات الخلفية جنبا إلى جنب مع بقية العناصر.
• المحلية - الصورة على مخطوطات الخلفية إذا كان التمرير يحتوي على المحتوى. يتم تجاوز الخلفية التي تتجاوز محتويات ثابتة.

مثال للاستخدام:

بودي {باكغروند-أتاشمنت فيكسيد}.

حاليا، لا يدعم فايرفوكس الموقع الأخير (محلي).

سمة الخلفية-الأصل

هذه السمة هي المسؤولة عن وضع العنصر. تتطلب متصفحات الإصدارات المبكرة استخدام البادئات. الملكية نفسها لديها ثلاثة معلمات:

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

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

سمة الخلفية-تكرار

عادة، إذا تم تحديد الخلفية من قبل الصورة، يجب أن تتكرر أفقيا أو رأسيا. لهذا، يتم استخدام سمة الخلفية-تكرار. لذلك، فإن خلفية كتلة التي كس تحتوي على هذه الخاصية يمكن أن يكون واحد من عدة معلمات:

• عدم تكرار - تظهر الصورة على الصفحة في متغير واحد؛
• كرر - تتكرر الخلفية على طول محاور س و ص.
• كرر-س - فقط أفقيا.
• كرر - y عموديا فقط.
• الفضاء - تتكرر الخلفية، ولكن إذا لم يتم شغل الفضاء، تظهر الصور بين الصور.
• جولة - يتم تحجيم الصورة إذا كنت لا يمكن الحصول على منطقة كاملة مليئة الصور كلها.

مثال على استخدام سمة:

الجسم {باكغروند-ريبيت: نو-ريبيت ريبيت} - على غرار الخلفية-تكرار: تكرار-y.

في CSS3، من الممكن تحديد قيم لعدة صور، إذا قمت بإدراج المعلمات باستخدام فاصلة.

سمة الخلفية كليب

تحدد هذه السمة سلوك الخلفية أسفل الحدود (على سبيل المثال، في حالة الإطارات المنقطة):

• الحشو مربع - يتم عرض الخلفية بدقة داخل كتلة.
• مربع الحدود - الصورة تأتي تحت إطارات.
• مربع المحتوى - تظهر الصورة على الخلفية فقط داخل المحتوى.

مثال للاستخدام:

بودي {باكغروند-كليب: كونتنت-بوكس؛}.

يتطلب كروم و سفاري استخدام البادئة -webkit.

سمات التعتيم والفلتر

تتيح لك خاصية التعتيم ضبط شفافية الخلفية - ستعمل خاصية كس في جميع المتصفحات. يتم تعيين القيمة من 0.0 إلى 1.0 شاملة. وبإجراء ذلك، يمكنك تعيين شفافية خلفية كس بدون قيمة صحيحة: بدلا من 0.3، يكفي كتابة 3:

.block {باكغروند-إيماج: ورل (img.png)؛ التعتيم: .3؛}.

لتعيين شفافية الخلفية، كس التي تكون مناسبة حتى ل إي أسفل الإصدار التاسع، استخدم سمة الفلتر:

.block {باكغروند-إيماج: ورل (img.png)؛ الفلتر: ألفا (أوباسيتي = 30)؛}.

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

اتبع دائما إحصاءات استخدام المتصفحات في رابطة الدول المستقلة وجميع البلدان الأخرى. أكبر مشكلة لجميع صناع تخطيط هو الإصدار القديم من إي، أنها لا تسمح لك لاستخدام CSS3 على أكمل وجه. عند إجراء التخطيط، لا تنس استخدام خدمات خاصة تحقق مما إذا كان متصفحك يدعم أي خاصية كس. إذا لم تتمكن من تثبيت الإصدارات القديمة من المتصفحات، فابحث عن الخدمة التي ستختبر تشغيل الموقع في متصفحات مختلفة عبر الإنترنت.