تصویر پس زمینه: | هیچ یک؛ تصویر پس زمینه: | هیچ | به ارث می برند؛ تصویر پس زمینه: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | هیچ یک

شرح

ویژگی تصویر پس زمینه(از انگلیسی "تصویر پس زمینه" - "تصویر پس زمینه") تصویر پس زمینه یک عنصر را تنظیم می کند.

توجه داشته باشید

هنگام تنظیم تصویر پس زمینه ، همچنین باید رنگ پس زمینه ای را مشخص کنید که در صورت در دسترس نبودن تصویر استفاده می شود. هنگامی که تصویری در دسترس است ، روی رنگ پس زمینه نمایش داده می شود. (به این ترتیب ، رنگ در قسمت های شفاف تصویر قابل مشاهده خواهد بود).

شرایط استفاده

با شروع با CSS3 (جدا شده با کاما) ، می توانید همزمان چندین تصویر پس زمینه را مشخص کنید. این باعث می شود تصاویر پس زمینه پایین از طریق مناطق شفاف تصاویر پس زمینه بالا قابل مشاهده باشند.

جاوا اسکریپت

[object] .style .backgroundImage = "[value]"؛

پشتیبانی از مرورگر

مشخصات

ارزش ها

همه مقادیر CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

هیچ نشان دهنده عدم وجود تصویر پس زمینه است. آدرس اینترنتی ( ) رشته URI تصویر را در داخل "url (...)" مشخص می کند.

background-image: url (myImage.png)؛

آدرس اینترنتی (" ") یک رشته URI تصویر را در" url (...) "مشخص می کند ، و رشته URI با" "" "DOUBLE QUOTE مشخص می شود.

background-image: url ("myImage.png")؛

وراثت نشان می دهد که عنصر باید پارامترهای عنصر والد را به ارث ببرد.

مقدار اولیه:"هیچ یک".

مثال استفاده

فهرست بندی کد

تصویر پس زمینه

یک سند با چندین تصویر پس زمینه

> ویژگی تصویر پس زمینه>

طراحی وب سایت با پس زمینه شروع می شود.

تجویز رنگ پس زمینه - ویژگی صحیح خواهد بود رنگ پس زمینه، برای ایمنی ، اگر تصویر بارگیری نمی شود. در داخل پرانتز url ()مسیر پوشه را با تصاویر مشخص کنید.

به طور پیش فرض ، تصویر تا زمانی که تمام صفحه مرورگر را پر کند ، مانند "کاشی" تکرار می شود ، وقتی صفحه را پایین می بریم ، "کاشی" ما هم صفحه دوم و هم صفحه سوم را پر می کند ، فقط تا زمانی که محتوای صفحه به پایان برسد. به واضح است که چنین نتیجه ای ارتفاع یک ایده طراحی نیست و ما "حمام" نخواهیم داشت ، بلکه فقط یک وبلاگ خواهیم داشت ، جایی که خوانایی آن نکته بسیار مهمی است.

یک گزینه ساده برای خلاص شدن از "کاشی کاری" استفاده از یک تصویر بزرگ ، با عرض حداقل 1024 پیکسل است ، به طوری که کل صفحه را پر کند. همچنین یافتن بافت بدون درز راه حل خوبی خواهد بود ، در صورت ضرب شدن ، تصویر به صورت یکپارچه می شود.

چگونه می توان زمینه را جذاب تر کرد؟

خدا را شکر که برای این کار یاورانی داریم:

• بدون تکرار- غیرفعال کردن تکرار
• تکرار-x- تکرار الگو فقط به صورت افقی
• تکرار-y- تکرار الگو فقط به صورت عمودی

مثلا:

سربرگ وبلاگ

این یک بافت پس زمینه است که فقط به صورت افقی تکرار می شود.

یاور بعدی ملک است موقعیت پس زمینه، به شما امکان می دهد تصویر پس زمینه را در هر نقطه روی صفحه قرار دهید. این تکنیک در طراحی وب مدرن بسیار رایج است. ما یک عکس داریم ، اما بخشی از محتوا نیست ، بلکه فقط به عنوان یک تزئین برای سایت عمل می کند.

عنوان

نمونه ای از یک پس زمینه غیرقابل تکرار با موقعیت یابی مشخص.

تصویر فقط یکبار نمایش داده می شود و در سمت راست قرار دارد.

تورفتگی از لبه سمت راست روی 200 پیکسل تنظیم شده است تا از همپوشانی متن با پس زمینه جلوگیری شود.

اگر می خواهیم هنگام پیمایش روی صفحه تصویر همیشه قابل مشاهده باشد ، باید ویژگی را به کد بالا اضافه کنیم - background-attachment: ثابت؛

چه فرقی بین imgو تصویر پس زمینه؟

تفاوت اساسی است ، تگ imgمستقیماً وارد بدن می شود Html-صفحات و مسئول محتوا (تصاویر ، عکس ها ، آواتارها) است ، بار معنایی را حمل می کند. بسیار مهم است که تصویر توسط موتورهای جستجو نمایه شود و به نتایج جستجو برسد. خواص تصویر پس زمینه CSS- سایت را منحصر به فرد و زیبا کنید ، یعنی این طرح ، که باید به یک فایل خارجی برداشته شود CSSسبک یا استفاده در داخل یک عنصر سبک.

البته این بدان معنا نیست تصویر پس زمینهاگر در بدن قرار گیرد کار نمی کند Html-صفحه ها اما من اکیداً توصیه می کنم که همه چیز مربوط به طراحی را در نظر بگیرید CSS... در نتیجه ، ما تمیز می شویم Html-کد:

• این تأثیر مثبتی بر نمایه سازی سایت خواهد داشت ، ربات های جستجوگر سایت شما را دوست خواهند داشت و بیشتر از آن بازدید می کنند.
• بازدیدکنندگان شما نیز راضی خواهند بود ، سایت به دلیل وزن کم سریعتر بارگیری می شود.
• شما ، به عنوان یک مدیر وب ، کار با کد تمیز را آسان تر می دانید.

خوب ، ما کمابیش همه گزینه های استفاده از ویژگی را در نظر گرفته ایم تصویر پس زمینه CSS... بیشتر تمرین کنید دوستان! با خیال راحت کد را کپی کرده و گزینه های دلخواه خود را ارائه دهید!

اطلاعات کوتاه

نسخه های CSS

ارزش ها

url مقدار مسیر فایل گرافیکی است که در داخل ساختار url () مشخص شده است. در این حالت ، مسیر فایل را می توان به صورت نقل قول (دو یا تک) یا بدون آنها نوشت. none تصویر پس زمینه عنصر را لغو می کند. وراثت مقدار را از والد به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

مدل شیء

document.getElementById ("elementID") .style.backgroundImage

مرورگرها

Internet Explorer 7.0 یا بالاتر پس زمینه ای را در قسمت داخلی عنصری که ویژگی hasLayout خود را تنظیم کرده است اعمال می کند. اگر یک عنصر hasLayout نداشته باشد ، ویژگی تصویر پس زمینه به مرزهای عنصر مطابق با مشخصات احترام می گذارد. اگر حاشیه ها به جای جامد بودن ، خط کشی یا نقطه گذاری باشند ، تفاوت در صفحه نمایش محسوس خواهد بود.

اگر عنصر روی اسکرول یا خودکار تنظیم شده باشد ، اینترنت اکسپلورر 8 هنگام پیمایش پس زمینه یک تاخیر عمودی یک پیکسلی خواهد داشت.

Internet Explorer تا نسخه 7.0 و از جمله مقدار ارثی را پشتیبانی نمی کند.

اگر پس زمینه برای ردیف جدول تنظیم شده است (برچسب ) ، سپس Chrome ، Safari ، iOS آن را مطابق مشخصات مشخص شده ، یعنی برای هر سلول به طور جداگانه نمایش نمی دهند. در حالی که مرورگر باید یک پس زمینه ثابت برای کل سطر نشان دهد. مثال 2 کد را برای نشان دادن خطا نشان می دهد.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

نتیجه این مثال در مرورگر Chrome در شکل نشان داده شده است. 1. مرورگر Internet Explorer ، Opera و Firefox پس زمینه خط را به درستی نمایش می دهند (شکل 2).

برنج. 1. تکرار پس زمینه برای هر سلول

برنج. 2. پس زمینه برای کل خط

اطلاعات کوتاه

نسخه های CSS

ارزش ها

url مقدار مسیر فایل گرافیکی است که در داخل ساختار url () مشخص شده است. در این حالت ، مسیر فایل را می توان به صورت نقل قول (دو یا تک) یا بدون آنها نوشت. none تصویر پس زمینه عنصر را لغو می کند. وراثت مقدار را از والد به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

مدل شیء

document.getElementById ("elementID") .style.backgroundImage

مرورگرها

Internet Explorer 7.0 یا بالاتر پس زمینه ای را در قسمت داخلی عنصری که ویژگی hasLayout خود را تنظیم کرده است اعمال می کند. اگر یک عنصر hasLayout نداشته باشد ، ویژگی تصویر پس زمینه به مرزهای عنصر مطابق با مشخصات احترام می گذارد. اگر حاشیه ها به جای جامد بودن ، خط کشی یا نقطه گذاری باشند ، تفاوت در صفحه نمایش محسوس خواهد بود.

اگر عنصر روی اسکرول یا خودکار تنظیم شده باشد ، اینترنت اکسپلورر 8 هنگام پیمایش پس زمینه یک تاخیر عمودی یک پیکسلی خواهد داشت.

Internet Explorer تا نسخه 7.0 و از جمله مقدار ارثی را پشتیبانی نمی کند.

اگر پس زمینه برای ردیف جدول تنظیم شده است (برچسب ) ، سپس Chrome ، Safari ، iOS آن را مطابق مشخصات مشخص شده ، یعنی برای هر سلول به طور جداگانه نمایش نمی دهند. در حالی که مرورگر باید یک پس زمینه ثابت برای کل سطر نشان دهد. مثال 2 کد را برای نشان دادن خطا نشان می دهد.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

نتیجه این مثال در مرورگر Chrome در شکل نشان داده شده است. 1. مرورگر Internet Explorer ، Opera و Firefox پس زمینه خط را به درستی نمایش می دهند (شکل 2).

برنج. 1. تکرار پس زمینه برای هر سلول

برنج. 2. پس زمینه برای کل خط

من فکر می کنم یک سایت واحد وجود ندارد که از اموال استفاده نشده باشد پس زمینه CSS... به نظر می رسد ، چه چیزی ساده تر از این ویژگی است؟ اما نه ، قابلیت های آن بسیار گسترده تر از هدف معمول یک تصویر یا رنگ به عنوان پس زمینه صفحه است. چیزی آشنا خواهد بود ، اما مطمئناً چیزی برای بسیاری تازگی خواهد داشت. در هر صورت ، آگاهی کامل از نحوه عملکرد پس زمینه مفید خواهد بود.

CSS3 موارد جدید زیادی را به ویژگی ارائه می دهد ، از جمله شفافیت و اختصاص چندین تصویر به عنوان پس زمینه ، اما ما در زیر در مورد آن صحبت می کنیم و ابتدا به اصول اولیه ویژگی می پردازیم. زمینه.

رنگ پس زمینه

من مطمئن هستم که شما چندین بار تکالیف رنگ پس زمینه را انجام داده اید. این را می توان با استفاده از چندین نوع علامت گذاری انجام داد: عادی (نام رنگ استفاده می شود) ، هگزا دسیمال یا RGB. هر نوع برابر است ، از هر کدام که بیشتر دوست دارید استفاده کنید. من سعی می کنم از کوتاهترین گزینه استفاده کنم ، و برای درک آن ساده تر است و اندازه سبک کمی کوچکتر است.

P (رنگ پس زمینه: قرمز ؛) p (رنگ پس زمینه: # f00 ؛) p (رنگ پس زمینه: # ff0000؛) p (رنگ پس زمینه: rgb (255 ، 0 ، 0 ؛))

CSS3 از شفافیت پشتیبانی می کند ، بنابراین می توانید آن را به رنگ ما نیز اضافه کنید ، مانند این:

P (رنگ پس زمینه: rgba (255 ، 0 ، 0 ، 0.5) ؛)

آخرین رقم 50٪ شفافیت بود. می توانید مقدار شفافیت را از 0 (پس زمینه کاملاً شفاف) تا 1 (کاملاً مات) تنظیم کنید.

تصویر پس زمینه

این ویژگی همچنین اغلب استفاده می شود ، به شما امکان می دهد یک تصویر را به پس زمینه اختصاص دهید. CSS3 قابلیت اختصاص چندین تصویر به پس زمینه را ایجاد می کند ، هر کدام نوعی لایه ایجاد می کنند ، بنابراین هر یک از بعدی بر روی لایه قبلی قرار می گیرد. چرا ممکن است این مفید باشد؟ همه چیز بسیار ساده است - فرض کنید شما باید دستگیره های کوچک را در هر گوشه سایت پیچ کنید. ارائه یک طرح کم و بیش روان ، استفاده از یک تصویر یک گزینه نیست. بنابراین ، ما 4 "لایه" ایجاد می کنیم ، هر تصویر را به گوشه خود منتقل می کنیم و تمام ، مشکل حل می شود

بدن (تصویر پس زمینه: url ("image1") ، url ("image2") ، url ("image3"))

اگر شما نیاز به اختصاص یک تصویر به پس زمینه دارید ، ما فقط اولین تصویر را در کد می گذاریم ، فکر می کنم این قابل درک باشد.
هنگام استفاده از تصویر به عنوان پس زمینه ، دو قانون را باید در نظر داشته باشید:

• در صورتی که کاربر به دلایلی نتواند تصویری را نشان دهد ، رنگ زمینه متضاد را تنظیم کنید. این می تواند صفحه نمایش تصاویر را خاموش کند ، در ترافیک صرفه جویی می کند.
• از تصویر پس زمینه برای انتقال اطلاعات مهم استفاده نکنید. به دلایلی که در بالا ذکر شد ، ممکن است کاربر آن را نبیند.

پشتیبانی از چندین تصویر پس زمینه به اندازه کافی گسترده است. همه مرورگرها ، حتی IE8 ، از این ویژگی پشتیبانی می کنند.