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

نسخه های CSS

ارزش های

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

مدل شی

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

مرورگرها

اینترنت اکسپلوررتا و شامل نسخه 7.0 یک پس‌زمینه در داخل مرز عنصری اعمال می‌کند که دارای مجموعه ویژگی hasLayout است. اگر عنصر hasLayout نداشته باشد، ویژگی background-image به مرزهای عنصر، همانطور که در مشخصات مشخص شده است، احترام می گذارد. تفاوت در رندر قابل توجه خواهد بود اگر حاشیه ها به جای یکپارچه، چین دار (نقطه دار یا نقطه چین) باشند.

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

پس زمینه برای TR

123

نتیجه این مثالکه در مرورگر کرومدر شکل نشان داده شده است. یکی مرورگر اینترنتاکسپلورر، اپرا و فایرفاکس به درستی پس زمینه ردیف را نمایش می دهند (شکل 2).

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

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

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

و این چیکار میکنه؟ این ملک تصویر پس زمینه cssیک تصویر را به عنوان پس زمینه در عناصر مختلف درج می کند HTML-صفحات این به برچسب محدود نمی شود. بدنو به طور گسترده در طراحی وب سایت استفاده می شود، به عنوان مثال برای: div, li, p, جدول, header, footer.

به یک مثال توجه کنید:







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




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

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

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

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

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

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

مثلا:







سربرگ وبلاگ


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



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







سرتیتر


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


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


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



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

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

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

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

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

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

فکر می کنم هیچ سایتی وجود ندارد که از ملک استفاده نشود پس زمینه 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 از این ویژگی پشتیبانی می کنند.

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

شرح

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

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

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

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

با شروع با 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 QUOTATION " " " محصور شده است.

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

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

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

مثال استفاده

فهرست کد

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

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

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





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

مدل شی

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

مرورگرها

اینترنت اکسپلورر تا و شامل نسخه 7.0 یک پس زمینه را در داخل مرز عنصری اعمال می کند که دارای ویژگی hasLayout است. اگر عنصر hasLayout نداشته باشد، ویژگی background-image به مرزهای عنصر، همانطور که در مشخصات مشخص شده است، احترام می گذارد. تفاوت در رندر قابل توجه خواهد بود اگر حاشیه ها به جای یکپارچه، چین دار (نقطه دار یا نقطه چین) باشند.

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

پس زمینه برای TR

123

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

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

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