آموزش CSS – قسمت 13 – رنگ زمینه

background-color
این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.
در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

کد:


<p>

متن بدون زمینه

<span style=”background-color: yellow”>
این قسمت زمینه زرد دارد

.</span></p>

همچنین می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

کد:


<table border=”1″ style=”background-color: #FFC0CB”>
<td>سلول اول</td>
<td>سلول دوم</td>
</table>

شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.
یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:

کد:


<form action=”some_script>
نام : <input type=”text” size=”30″ style=”background-color: #009900″>
</form>

شما می توانید با استفاده از این ویژگی در تگ body رنگ زمینه صفحه را هم تغییر دهید. در مورد تصویر زمینه هم که در قسمت بعد به آن می پردازیم می توان به همین صورت عمل کرد.

background-image
این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.

کد:


background-image:url(“ url/picture”)

بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( ” ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:

بیشتر بخوانید  آموزش CSS قسمت 10 - کار با متنها 1

کد:


<span style=”background-image: (http://www.w3schools.com/css/example1.gif)”>

برای این span از فایل example.gif به عنوان زمینه استفاده شده

</span>

از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم:

کد:


<table border=”1″ style=”background-image: url(https://www.neopersia.org/css/example1.gif)”>
<td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>

در اینجا از این ویژگی برای یک textarea استفاده می کنیم:

کد:


<form>
<textarea rows=”8″ cols=”60″ style=”background-image:url(https://www.w3schools.com/css/example1.gif)”>
</textarea>
</form>

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

برخی از این خواص در لینک زیر قابل مشاهده میباشند :
http://w3schools.com/css/css_background.asp

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

کد:


<style type=”text/css”>
<!–
body {
background-image:url(https://www.w3schools.com/images/index.jpg);
background-repeat:repeat-y }
–>
</style>

در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید

background-repeat
همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.

بیشتر بخوانید  آموزش CSS قسمت سوم - استفاده از Style در تگهای HTML : ( روش خطی )

این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:

repeat
این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
no-repeat
این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
repeat-x
این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
repeat-y
این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

background-attachment
از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:

scroll
اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
fixed
با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد

کد:


<style type=”text/css”>
<!–
body {
background-image:url(https://www.w3schools.com/images/cssBGtest.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
–>
</style>

background-position

این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.
دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند

بیشتر بخوانید  آموزش CSS قسمت 11 - فونت

top, center, or bottom
left, center, or right

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

background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
background-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد

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

در این مثال از یک تصویر به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:

کد:


<style type=”text/css”>
<!–
body {
background-image:url(background-image.gif);
background-attachment:fixed;
background-position:40px 20px }
–>
</style>

کد های آمده درا ین قسمت را حتما امتحان کنید و نتیجه ها را با مقادیر مختلف امتحان کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *