پس زمینه CSS. راهنمای کامل پس زمینه در CSS (رنگ، ​​موقعیت، تصویر، تکرار، پیوست) - همه چیز برای تنظیم رنگ پس زمینه یا تصویر پس زمینه عناصر Html تکرار پس زمینه Css

با سلام خدمت خوانندگان محترم سایت وبلاگ. امروز ما به پنج قانون CSS نگاه خواهیم کرد که به شما امکان می دهد پس زمینه را برای هر عنصر در Html تنظیم کنید - موقعیت پس زمینه (تصویر، تکرار، رنگ، پیوست). خوب، ذکر قانون ترکیب Background را فراموش نکنیم.

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

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

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

بیایید ابتدا ببینیم که چگونه رنگ عناصر Html با استفاده از آن تنظیم می شود قوانین رنگ css. در واقع، همه چیز در اینجا ساده است. سینتکس کاملاً عادی است و می توانید رنگ را مطابق با روشی که در زبان نشانه گذاری فرامتن انجام شده است تنظیم کنید. همانطور که به یاد دارید، پس از علامت هش (هش - "#fe35a3")، یا با کمک سه رقم، اگر عدد اول با مقدار دوم مطابقت داشت، عدد سوم به ترتیب با عدد چهارم، خوب و پنجم مطابقت داشت. با ششم (کد رنگ "#aa33ff" را می توان به اختصار "a3f" نامید).

همچنین، رنگ‌ها در کد Html و Css را می‌توان به صورت کلمات نشان داد (به عنوان مثال، "قرمز")، اما کد هگزادسیمال اغلب استفاده می‌شود:

رنگ:#303

به عنوان مثال، من این پاراگراف کوچک را با همان رنگ بالا (#303) رنگ آمیزی کردم. اکنون کمی با رنگ تمام پاراگراف‌های دیگر متفاوت است (تیره‌تر)، که در فایل CSS موضوع وردپرسی که من استفاده می‌کنم روی 555# تنظیم شده است. اما تنظیم رنگ از طریق رنگ بسیار ساده است، اما با پس زمینه کمی پیچیده تر خواهد بود.

بنابراین، برای پس زمینه در cssپنج قانون را رعایت کنید که در صورت تمایل می توان آنها را در یک تیم ترکیب کرد. برای مشاهده آنها، می توانید به صفحه مشخصات W3C فعلی بروید و چیزی را با کلمه Background در آنجا جستجو کنید:

1. رنگ پس زمینه - این قانون رنگ پس زمینه را برای هر عنصر Html تنظیم می کند. می توانید از کد یا نام سایه موجود در آن استفاده کنید. همه چیز دقیقاً همانطور که هنگام استفاده از رنگ بود است.

تصویر پس‌زمینه - با آن می‌توانید از یک تصویر به عنوان پس‌زمینه استفاده کنید (اما حتماً در مورد آن مطالعه کنید، زیرا تصاویر سنگین بارگذاری صفحه را کاهش می‌دهند)، مسیری که به آن در عملکرد url () نشان داده می‌شود.

اگر به مشخصات نگاه کنید، متوجه خواهید شد رنگ پس زمینه پیش فرضهر عنصری شفاف خواهد بود (مقدار پیش‌فرض قانون "background-color:transparent" است). درست است، در عناصر به طور پیش فرض شفاف نخواهد بود، زیرا. اینها عناصر سیستم هستند و همه چیز برای آنها متفاوت است و با برچسب های زبان نشانه گذاری فرامتن معمولی متفاوت است.

رنگ در رنگ پس زمینه به عنوان استاندارد (شش یا سه رقم هگزادسیمال یا یک کلمه) تنظیم می شود:

رنگ زمینه:#FEFCDE

به عنوان مثال، پس‌زمینه این پاراگراف دقیقاً از طریق پس‌زمینه رنگ با کد رنگی که دقیقاً در بالا داده شده است، تنظیم می‌شود.

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

اگر به مشخصات زبان نشانه‌گذاری سبک نگاه کنید، می‌بینید که تصویر پس‌زمینه روی «هیچ» پیش‌فرض است (یعنی هیچ تصویر پس‌زمینه‌ای استفاده نمی‌شود). خوب، اگر هنوز به آن نیاز دارید، در عملکرد url () باید مسیر آن را مشخص کنید:

Background-image:url(https://site/image/comment_top_focus.gif)؛

به عنوان مثال، برای این پاراگراف، من از یک فایل گرافیکی با پس زمینه استفاده کردم که مسیر آن دقیقاً در بالا توضیح داده شده است. می بینید که کل ناحیه ای که برای این پاراگراف در نظر گرفته شده است با یک تصویر تکراری پوشیده شده است که در تصویر اصلی به این صورت است:

آن ها وقتی فقط از یک قانون پس‌زمینه-تصویر استفاده می‌کنیم که مسیر فایل گرافیکی را مشخص می‌کند، این تصویر هم به صورت عمودی و هم افقی بازتولید می‌شود تا زمانی که کل منطقه اختصاص داده شده در صفحه وب برای این عنصر Html خاص را پوشش دهد (در مثال ما، این یک پاراگراف). چرا این اتفاق می افتد؟

Background-repeat - تکرار تصویر پس زمینه

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

بنابراین، با Background-repeat می توانیم مدیریت تکرار تصویر پس زمینه. این قانون فقط می تواند چهار مقدار داشته باشد:




موقعیت پس زمینه - موقعیت پس زمینه

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



با نگاهی به مشخصات CSS، مشخص می‌شود که چرا تصویر پس‌زمینه پیش‌فرض دقیقاً در لبه سمت چپ بالای ناحیه عنصر Html فشرده شده است. زیرا مقدار "0% 0%" پیش‌فرض قانون موقعیت پس‌زمینه است.

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

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

هنگام تنظیم موقعیت تصویر پس زمینه با استفاده از واحدهای مطلق background-position برای تعیین موقعیت نهایی خود دارای اصل زیر است:

آن ها مرورگر جابجایی های مشخص شده را در امتداد محورهای X و Y از مبدا ناحیه ای که شی در آن قرار دارد تا مبدا خود این تصویر محاسبه می کند. به عنوان مثال، در این پاراگراف، با استفاده از قوانین CSS زیر، تصویر پس‌زمینه را از طریق موقعیت پس‌زمینه قرار دادم:

Background-image:url(https://website/image/logo.png)؛ background-repeat:no-repeat; موقعیت پس زمینه: 400px 25px;

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

با این حال، اگر یک موقعیت پس‌زمینه ثابت برای عناصری مانند Body یا Html (یعنی در برچسب‌هایی که کل صفحه وب را پوشش می‌دهند) تنظیم کنید، این تصویر همیشه در viewport قابل مشاهده خواهد بود و این دقیقاً همان استفاده از CSS پس‌زمینه است. دارایی در طرح بلوک مدرن

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

Png) بدون تکرار 50%؛

قانون مونتاژ نشان داده شده در مثال برای وضوح در این پاراگراف اعمال می شود. ظاهر زیبایی نداشت، اما موضوع این نیست. این پاراگراف از رنگ پس‌زمینه زرد عجیب و غریب استفاده می‌کند و از تصویری از لوگوی LiveInternet که در مرکز پاراگراف تراز شده است استفاده می‌کند. زیرا برای قانون پیوست پس‌زمینه، هیچ مقداری تنظیم نمی‌شود، سپس از اسکرول (پیش‌فرض) استفاده می‌شود.

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

رنگ زمینه:#FEFCDE

نوشتن:

زمینه: #FEFCDE

برای تمام مقادیر دیگر قانون پیش ساخته به طور پیش فرض گرفته می شود و این همان چیزی است که شما نیاز دارید.

موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم

ممکن است علاقه مند باشید

سبک لیست (نوع، تصویر، موقعیت) - قوانین Css برای سفارشی کردن ظاهر لیست ها در کد Html نحوه تغییر رنگ پس‌زمینه ردیف‌های جداول، لیست‌ها و سایر عناصر Html در سایت با استفاده از کلاس شبه nth-child
موقعیت (مطلق، نسبی و ثابت) - راه هایی برای قرار دادن عناصر Html در CSS (قوانین چپ، راست، بالا و پایین)
شناور و پاک کردن در CSS - ابزارهای طرح بندی بلوک
تعیین موقعیت با شاخص Z و قانون مکان‌نما CSS برای تغییر مکان‌نمای ماوس
Padding، Margin و Border - لایه‌های داخلی و خارجی CSS و همچنین حاشیه‌ها را برای همه طرف‌ها (بالا، پایین، چپ، راست) تنظیم می‌کنیم.
نمایش (بلاک، هیچ، درون خطی) در CSS - تنظیم نوع نمایش عناصر Html در یک صفحه وب
اولویت ها در Css و افزایش آنها به دلیل مهم، ترکیب و گروه بندی انتخابگرها، سبک های کاربر و نویسنده
CSS - چیست، چگونه استایل شیت های آبشاری با استفاده از Style و Link به کد Html متصل می شوند
انتخابگرهای برچسب، کلاس، شناسه و جهانی و همچنین انتخابگرهای ویژگی در CSS مدرن

اطلاعات مختصر

نسخه های 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

1

2

3

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