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

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

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

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

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

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

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

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

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

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

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

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

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

رنگ:#303

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

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

رنگ پس زمینه - با استفاده از این قانون، رنگ پس زمینه را برای هر عنصر Html تنظیم می کنید. می توانید از یک کد یا نام سایه استفاده کنید، به عنوان مثال. همه چیز دقیقاً همان است که هنگام استفاده از رنگ بود.

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

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

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

رنگ زمینه: #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 دقیقاً از لبه سمت چپ بالا گزارش می شوند. عنصر منطقه).

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

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

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

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

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

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

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

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

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

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

رنگ زمینه: #FEFCDE

نوشتن:

زمینه: #FEFCDE

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

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

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

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

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

آیا می توان از HTML برای تنظیم پس زمینه استفاده کرد؟

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

بر این اساس، ما از Cascading Style Sheets (CSS) استفاده خواهیم کرد. خیلی هست امکانات بیشتربرای تنظیم پس زمینه امروز به اساسی ترین آنها خواهیم پرداخت.

چگونه با استفاده از css پس زمینه را تنظیم کنیم؟

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

پس از تصمیم گیری در مورد انتخابگر، باید نام خود ملک را بنویسید. برای تنظیم رنگ پس زمینه (یعنی یک رنگ ثابت، نه یک گرادیان یا یک تصویر)، از ویژگی background-color استفاده کنید. بعد از آن باید یک دو نقطه بگذارید و خود رنگ را بنویسید. این را می توان به روش های مختلف انجام داد. به عنوان مثال، با استفاده از کلمات کلیدی، کد هگز، فرمت های rgb، rgba، hsl. هر روشی انجام خواهد داد.

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

بدنه (رنگ پس زمینه: #D4E6B3؛ )

این کد باید در قسمت head درج شود. مهم است که فایل ها در یک پوشه باشند.

تصویر به عنوان پس زمینه

برای تصویر از یک آیکون کوچک زبان html استفاده خواهم کرد:

بیایید یک بلوک خالی با یک شناسه ایجاد کنیم:

< div id = "bg" > < / div >

بیایید ابعاد و پس زمینه صریح به آن بدهیم:

#bg(عرض: 400 پیکسل؛ ارتفاع: 250 پیکسل؛ تصویر پس‌زمینه: url (html.png)؛ )

#bg(

عرض: 400 پیکسل؛

ارتفاع: 250 پیکسل؛

پس زمینه - تصویر : url (html . png ) ;

از این کد می بینید که من از یک ویژگی جدید - background-image استفاده کردم. این به طور خاص برای درج یک تصویر به عنوان پس زمینه به یک عنصر html در نظر گرفته شده است. ببینیم چی شد:

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

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

اما آیا به یک چیز توجه کردید؟ مرورگر تصویر را در سراسر بلوک گرفت و ضرب کرد. بنابراین، فقط برای اینکه بدانید، این رفتار پیش‌فرض تصاویر پس‌زمینه است - تا زمانی که بتوانند در بلوک قرار بگیرند، به صورت عمودی و افقی تکرار می‌شوند. با این رفتار شما به راحتی می توانید کنترل کنید. برای این کار از خاصیت Background-repeat استفاده کنید که دارای 4 مقدار اصلی است:

Repeat - مقدار پیش فرض، تصویر در هر دو طرف تکرار می شود.

Repeat-x - فقط در محور x تکرار می شود.

Repeat-y - فقط در امتداد محور y تکرار می شود.

بدون تکرار - به هیچ وجه تکرار نمی شود.

می توانید هر مقدار را بنویسید و ببینید چه اتفاقی می افتد. اینجوری مینویسم:

background-repeat: repeat-x;

پس زمینه - تکرار : تکرار - x ;

حالا فقط به صورت افقی تکرار کنید. اگر بدون تکرار را تنظیم کنید، تنها یک تصویر وجود خواهد داشت.

عالی است، می‌توانیم اینجا را تمام کنیم، زیرا اینها قابلیت‌های اولیه کار با پس‌زمینه هستند، اما من ۲ ویژگی دیگر را به شما نشان می‌دهم که به شما امکان می‌دهد کنترل بیشتری داشته باشید.

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

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

به‌طور پیش‌فرض، تصویر پس‌زمینه، مگر اینکه برای تکرار تنظیم شده باشد، در گوشه سمت چپ بالای بلوک خود قرار می‌گیرد. اما موقعیت را می توان به راحتی با استفاده از ویژگی background-position تغییر داد.

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

پس زمینه موقعیت: سمت راست بالا.

پس زمینه - موقعیت : سمت راست بالا .

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

پس زمینه موقعیت: 50% 50%;

یک نکته مهم را در مورد موقعیت یابی به خاطر بسپارید - اولین پارامتر همیشه موقعیت افقی و دوم موقعیت عمودی است. بنابراین، اگر مقدار 80% 20% را مشاهده کردید، بلافاصله می‌توانید نتیجه بگیرید که تصویر پس‌زمینه بسیار به سمت راست جابه‌جا می‌شود، اما خیلی پایین نمی‌آید.

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

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

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

پس زمینه: #333 url(bg.jpg) بدون تکرار 50% 50%;

زمینه: #333 url(bg.jpg) بدون تکرار 50% 50%؛

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

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

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

در این مورد چه کاری می توانید انجام دهید؟ البته ساده‌ترین و معقول‌ترین گزینه، کاهش تصویر است، اما انجام این کار همیشه امکان‌پذیر نیست. فرض کنید روی سرور و داخل قرار دارد این لحظهزمان یا فرصتی برای کاهش آن وجود ندارد. مشکل را می توان با استفاده از ویژگی background-size که نسبتاً جدید است و به شما امکان می دهد اندازه را دستکاری کنید حل کرد تصویر پس زمینهو در واقع هر پیشینه ای.

بنابراین تصویر من اکنون تمام فضای بلوک را اشغال می کند، اما اندازه پس زمینه را به آن می دهم:

اندازه پس زمینه: 80% 50%;

مجدداً، پارامتر اول اندازه افقی را تعیین می کند، دوم - اندازه عمودی. می بینیم که همه چیز به درستی اعمال شد - عکس 80٪ عرض بلوک در عرض و نیمی از ارتفاع شد. در اینجا فقط باید یک توضیح بدهید - با تنظیم اندازه به عنوان درصد، می توانید بر نسبت های تصویر تأثیر بگذارید. بنابراین اگر می خواهید نسبت ها را به هم نزنید مراقب باشید.

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

جلد - تصویر به گونه ای کوچک می شود که حداقل از یک طرف آن بلوک را کاملاً پر کند.

Contain – آن را به گونه ای مقیاس می دهد که تصویر در حداکثر اندازه خود کاملاً در بلوک قرار گیرد.

مزیت این مقادیر این است که نسبت های تصویر را تغییر نمی دهند و آنها را یکسان می کنند.

همچنین باید بدانید که کشش تصویر می تواند منجر به بدتر شدن کیفیت آن شود. من می توانم از زندگی و تمرین واقعی طراحان چیدمان مثال بزنم. همه می دانند و می دانند که هنگام طراحی برای دسکتاپ، باید سایت را با عرض مانیتور اصلی تطبیق دهید: 1280، 1366، 1920. اگر یک تصویر پس زمینه با اندازه مثلاً 1280 در 200 بگیرید و آن را ندهید. اندازه پس زمینه، سپس صفحه هایی با عرض بزرگتر یک فضای خالی ظاهر می شود، تصویر به طور کامل عرض را پر نمی کند.

در 99٪ موارد، این برای توسعه دهنده وب مناسب نیست، بنابراین او اندازه پس زمینه: پوشش را طوری تنظیم می کند که تصویر همیشه تا حداکثر عرض پنجره کشیده شود. این یک تکنیک خوب برای استفاده است، اما اکنون با این مشکل مواجه خواهید شد که کاربران با عرض صفحه نمایش 1920 پیکسل ممکن است کیفیت تصویری کمتر از حد مطلوب را ببینند.

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

به طور کلی، این تنها 1 مثال از نحوه استفاده از دانشی است که در این مقاله به دست آورده‌اید، هنگام چیدمان طرح‌بندی واقعی.

پس زمینه شفاف با استفاده از css

یکی دیگر از ویژگی هایی که می توان با آن پیاده سازی کرد با استفاده از css– پس زمینه شفاف یعنی از طریق این پس زمینه می توان دید که پشت آن چه چیزی نهفته است.

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

همانطور که قبلاً گفتم، فرمت های زیادی برای تنظیم رنگ ها در CSS وجود دارد. یکی از آنها rgb است، کافی است فرمت شناخته شدهبرای کسانی که در ویرایشگرهای گرافیکی کار می کنند. به این صورت نوشته شده است: rgb(17, 255, 34);

اولین مقدار در پرانتز اشباع رنگ قرمز، سپس سبز و سپس آبی است. مقدار می تواند از 0 تا 255 عددی باشد. بر این اساس، فرمت rgba تفاوتی ندارد، فقط یک پارامتر دیگر اضافه می شود - کانال آلفا. مقدار می تواند از 0 تا 1 باشد که در آن 0 شفافیت کامل است.