دليل كامل. خلفية CSS. دليل كامل ما هو الفرق بين IMG والصورة الخلفية
وهنا وصلنا إلى الصفحة الرئيسية، إعادة صياغة: "الموقع يبدأ بالخلفية". يصنع معظم المدونين "مدونات كلاسيكية" مع خلفية بيضاء، لكننا سنذهب مختلفا. اجتياز الخصائص الرائعة CSS خلفية الصورة، لا يمكننا ذلك.
ماذا تعمل، أو ماذا تفعل؟ هذا العقار CSS خلفية الصورة إدراج صورة كخلفية في عناصر مختلفة لغة البرمجة.الأعماد. لا يقتصر على العلامة الجسم.، ويستخدم على نطاق واسع في تصميم الموقع، على سبيل المثال: dIV، LI، P، الجدول، رأس، تذييل.
النظر في مثال:
يبدأ تصميم الموقع بالخلفية.
سيكون صحيحا تسجيل اللون في الخلفية - الخاصية لون الخلفية.، من أجل التخميد، إذا كانت الصورة لا التمهيد. بين قوسين عنوان URL () حدد المسار إلى المجلد مع الصور.
بشكل افتراضي، سيتم تكرار الصورة ك "بلاط" حتى يملأ الشاشة بأكملها من المتصفح، حيث تنتقل الصفحة، وسوف تملأ "البلاط" والشاشة الثانية والثالثة، تماما حتى محتوى اكتمال الصفحة. من الواضح أن مثل هذه النتيجة ليست الجزء العلوي من الفكر المصمم، ولن يكون لدينا "حمام"، ولكن مجرد مدونة حيث تكون قابلية القراءة نقطة مهمة للغاية.
خيار بسيط للتخلص من "Telia" هو استخدام صورة بأحجام كبيرة، على الأقل 1024 PX واسعة بحيث تملأ نفسها الشاشة بأكملها. أيضا سوف يكون قرار جيد ابحث عن نسيج سلس، مع استنساخ، وسوف يكون الرسم مثل واحد.
كيفية جعل الخلفية أكثر جاذبية؟
الحمد لله ولدينا مساعدين على هذا:
- لا تكرار. - لحظر التكرار
- كرر X. - تكرار الرسم أفقيا فقط
- كرر ذ. - تكرار الرسم عموديا فقط
على سبيل المثال:
غطاء بلوق
هذا نسيج خلفية مع التكرار أفقيا فقط
مساعد القادم - الممتلكات موقف الخلفيةيسمح لك بوضع صورة الخلفية في أي مكان على الشاشة. هذه التقنية منتشرة في تصميم الويب الحديث. لدينا صورة، لكنها ليست جزءا من المحتوى، ولكنها بمثابة زخرفة الموقع.
لقب
مثال على خلفية غير رسمية مع وضع معين.
يتم عرض الصورة مرة واحدة فقط ويقع على اليمين.
يتم تعيين المسافة البادئة من الحافة اليمنى من 200 PX من أجل تجنب نص النص على الخلفية.
إذا كنا نريد أن تكون الصورة مرئية دائما عند التمرير إلى أسفل الشاشة، فأنت بحاجة إلى إضافة خاصية إلى التعليمات البرمجية أعلاه - مرفق الخلفية: ثابت؛
ما الفرق بين img. و الصورة الخلفية؟
الفرق الرئيسي، العلامة img. إدراج مباشرة في الجسم لغة البرمجة.- المساعد وهو مسؤول عن المحتوى (الرسوم التوضيحية، الصور الفوتوغرافية، تجسدات الآلهة)، تحمل حمولة دلالية. من المهم جدا أن تكون الصورة مفهرسة. محركات البحث وانتقل إلى إصدار البحث. الخصائص CSS خلفية الصورة - اصنع موقعا فريدا وجميلا، وهذا هو، هذا التصميم، الذي يجب نقله إلى الملف الخارجي CSS. أنماط أو استخدام داخل العنصر أسلوب..
بالطبع، هذا لا يعني ذلك الصورة الخلفية. لن تعمل إذا وضعتها في الجسم لغة البرمجة.الأعماد. لكنني أوصي بشدة كل شيء فيما يتعلق بالتصميم الذي يتحمله CSS.وبعد نتيجة لذلك، نحصل على نظافة لغة البرمجة.-الرمز:
- سيؤثر ذلك على فهرسة الموقع، ستحب روبوتات البحث موقعك وتأتي إليهما في كثير من الأحيان.
- سيتم رضاك \u200b\u200bزوارك أيضا، وسيتم تحميل الموقع بشكل أسرع بسبب وزن صغير.
- تحب سيد الويب أسهل في العمل مع رمز نظيف.
حسنا، قمنا بمراجعة جميع الخيارات أكثر أو أقل باستخدام الممتلكات. CSS خلفية الصورةوبعد المزيد من الأصدقاء الممارسة! بجرأة نسخ الرمز واخترع خياراتك!
معلومات مختصرة
الإصدارات CSS.
قيم
عنوان URL كقيمة المسار المستخدمة إلى ملف الرسوم البيانيةالذي تم تحديده داخل تصميم URL (). يمكن كتابة المسار إلى الملف كلاهما في علامات اقتباس (مزدوجة أو واحدة)، وبدونها. لا شيء يلغي صورة الخلفية للعنصر. يرث ترث قيمة الوالدين.HTML5 CSS2.1 IE CR OP SA FX
نموذج كائن
document.getelementByID ("elementid") .style.backgroundimage
متصفحات
متصفح الانترنت. قبل الإصدار 7.0، يقوم بتشغيل الخلفية إلى الجزء الداخلي من حدود العنصر، والذي يحتوي على خاصية Haslayout. إذا لم يكن العنصر Haslayout، فإن خاصية صور الخلفية ستحصل في الاعتبار حدود العنصر، كما هو المحدد في المواصفات. سيكون الفرق في التعيين ملحوظا إذا كانت حدود المنقطة (متقطع أو منقط)، وليس الصلبة.
إذا تم تعيين القيمة كمرافق أو تلقائي لعنصر، في Internet Explorer 8 سيكون هناك تأخير عمودي في بكسل واحد عند التمرير في الخلفية.
Internet Explorer قبل الإصدار 7.0 لا يدعم قيمة Worherit.
إذا تم تعيين الخلفية لصف الجدول (العلامة
HTML5 CSS2.1 IE CR OP SA FX
| 1 | 2 | 3 |
نتيجة هذا المثال في متصفح الكروم يظهر في الشكل. واحد. متصفح الانترنت يعرض Explorer و Opera و Firefox خلفية السلسلة (الشكل 2).
تين. 1. تكرار الخلفية لكل خلية
تين. 2. الخلفية للصف بأكمله
معلومات مختصرة
الإصدارات CSS.
قيم
عنوان URL يستخدم المسار إلى ملف الرسوم كقيمة، والتي تم تحديدها داخل تصميم URL (). يمكن كتابة المسار إلى الملف كلاهما في علامات اقتباس (مزدوجة أو واحدة)، وبدونها. لا شيء يلغي صورة الخلفية للعنصر. يرث ترث قيمة الوالدين.HTML5 CSS2.1 IE CR OP SA FX
نموذج كائن
document.getelementByID ("elementid") .style.backgroundimage
متصفحات
ينطبق Internet Explorer على الإصدار 7.0 شامل الخلفية بالجزء الداخلي من حدود العنصر، والذي يحتوي على خاصية Haslayout. إذا لم يكن العنصر Haslayout، فإن خاصية صور الخلفية ستحصل في الاعتبار حدود العنصر، كما هو المحدد في المواصفات. سيكون الفرق في التعيين ملحوظا إذا كانت حدود المنقطة (متقطع أو منقط)، وليس الصلبة.
إذا تم تعيين القيمة كمرافق أو تلقائي لعنصر، في Internet Explorer 8 سيكون هناك تأخير عمودي في بكسل واحد عند التمرير في الخلفية.
Internet Explorer قبل الإصدار 7.0 لا يدعم قيمة Worherit.
إذا تم تعيين الخلفية لصف الجدول (العلامة
HTML5 CSS2.1 IE CR OP SA FX
| 1 | 2 | 3 |
يتم عرض نتيجة هذا المثال في متصفح Chrome في الشكل. 1. Internet Explorer، Opera و Firefox Browser عرض خلفية بشكل صحيح لسلسلة (الشكل 2).
تين. 1. تكرار الخلفية لكل خلية
تين. 2. الخلفية للصف بأكمله
الصورة الخلفية:
وصف
خاصية صور الخلفية (من الإنجليزية. صورة الخلفية "-" صورة الخلفية ") يحدد صورة الخلفية للعنصر.
ملحوظة
عند تثبيت صورة الخلفية، يجب عليك أيضا تحديد لون الخلفية المراد استخدامه في حالة عدم توفر الصورة. في الحالة عندما تتوفر الصورة، يتم عرضها أعلى لون الخلفية. (وبالتالي، سيكون اللون مرئيا في الأجزاء الشفافة من الصورة).
شروط الاستخدام
بدءا من CSS3 (VIA Comma)، يمكنك تحديد العديد من الصور الخلفية في وقت واحد. في الوقت نفسه، ستكون صور الخلفية السفلية مرئية من خلال المناطق الشفافة لصور الخلفية العليا.
جافا سكريبت.
[كائن] .style .backgroundimage \u003d "[قيمة]"؛
دعم المتصفحات
تخصيص
قيم
جميع القيم CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
لا شيء يشير إلى عدم وجود صورة الخلفية. عنوان URL (
صورة الخلفية: URL (myimage.png)؛
عنوان URL ("
صورة خلفية: URL ("myimage.png")؛
يشير الوثارة إلى أن العنصر يجب أن يرث معلمات العنصر الأصل.
المعنى الأولي: "لا أحد."
مثال على الاستخدام
قائمة الإدراج
الصورة الخلفية
وثيقة مع صور خلفية متعددة.