آموزش CSS-استایل دهی پس زمینه

تغییر رنگ و تصویر پس زمینه در CSS

Wiki

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

این خصوصیات عبارتند از:

background-color background-image background-repeat background-attachment background-position رنگ پس زمینه

Wiki

خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.

در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:

مثال

body {background-color:#b0c4de;}

خودتان امتحان کنید »

در CSS رنگ به یکی از روش های زیر مشخص می شود:

name: نام رنگ باید مشخص شود مانند “red” RGB: به صورت RGB مشخص می شود مانند “(rgb(255,0,0″ Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:

مثال

h1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;}

خودتان امتحان کنید »

نمایش یک عکس در پس زمینه

Wiki

خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.

به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.

در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:

مثال

body {background-image:url(‘paper.gif’);}

خودتان امتحان کنید »

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

مثال

body {background-image:url(‘bgdesert.jpg’);}

خودتان امتحان کنید »

تکرار عکس در محور X و Y

Wiki

اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.

بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:

مثال

body{background-image:url(‘gradient2.png’);}

خودتان امتحان کنید »

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

مثال

body{background-image:url(‘gradient2.png’);background-repeat:repeat-x;}

خودتان امتحان کنید »

تنظیم مکان عکس پس زمینه

Wiki

توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

در مثال زیر با تنظیم خصوصیت background-repeat با مقدار “no-repeat” عکس پس زمینه فقط یکبار نمایش داده می شود.

مثال

body{background-image:url(‘img_tree.png’);background-repeat:no-repeat;}

خودتان امتحان کنید »

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

مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:

مثال

body{background-image:url(‘img_tree.png’);background-repeat:no-repeat;background-position:right top;}

خودتان امتحان کنید »

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

Wiki

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

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

در CSS از خصوصیت “background” برای مختصر نویسی پس زمینه استفاده می شود:

مثال

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

خودتان امتحان کنید »

ترتیب مقادیر باید به صورت زیر باشد:

background-color background-image background-repeat background-attachment background-position

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

مثال – خودتان امتحان کنید

Wiki

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

مثال پیشرفتهدر این مثال از CSS پیشرفته استفاده شده است، لطفاً نگاهی به آن بیندازید.

ویدیو مرتبط :
آموزش CSS | استایل دهی نقل قول با عناصر کاذب در CSS