کار با رنگ ها و تصویر زمینه

 

خصوصیت Color

با استفاده از این خاصیت می توان رنگ متن عناصر را تغییر داد. و به پنج طریق می توان آن را مقدار دهی کرد.

  • استفاده از کلمات کلیدی : می توان از 16 رنگ استاندارد برای مقدار دهی به color استفاده کرد عبارتند از:

color <a  style=آموزش CSS ( فصل چهارم) : کار با رنگ ها و تصویر زمینه" title="color" width="386" height="190" />

مثال:

1 P { color: lime; }
  • استفاده از مبنای هگزا دسیمال : رنگ ها را می توان بر مبنای عبارت متناظر آنها در مبنای 16 به کار برد. در این عبارت می توان سه عدد در مبنای 16 نوشت. عدد اول معرف رنگ قرمز، عدد دوم معرف رنگ سبز و عدد سوم معرف رنگ آبی است. فرم کلی این عبارت ها به شکل rrggbb# است. برای مثال 000000# معرف رنگ سیاه #ffffff معرف رنگ سفید و #0000ff معرف رنگ آبی است.

مثال :

1 P { color: #ff00aa; }
  • استفاده از کوتاه نویسی هگزادسیمال : در این روش زوج مقادیر تکراری را می توان به صورت تکی نوشت. برای مثال fff معادل ffffff ، و 000  معادل 000000   و ccddaa معادل cda می باشد.

مثال :

1 P { color: #af0; }
  • استفاده از تابع rgb : تابع rgb به ترتیب سه رنگ قرمز (red) ، سبز (green) ،  آبی (blue) را به عنوان مقدار می پذیرد. این مقادیر یا اعداد، صحیح هستند. (از 0 تا 255) و یا به صورت درصد می باشند. (از 0 تا 100 درصد).

مثال :

1 P { color: rgb(120,200,40); }
  • استفاده از تابع rgbaاینتابع که در css3 معرفی شد، همانند تابع rgb است با این تفاوت که پس از اختیار سه مقدار اول که برای تعیین رنگ به کار می روند، مقدار چهارمی نیز را باید اختیار کرد که مقدار شفافیت (opacity) رنگ را تعیین می کند. و مقداری بین 0 تا 1 می پذیرد. که مقدار 0 به معنای 0 درصد و 1 به معنای 100 درصد است.

مثال:

1 P {color: rgba(120,140,130,.25); }

برای دیدن همه رنگ های استاندارد و مقدار هگزادسیمال و rgb آنها به لینک زیر بروید

خصوصیت background-color

با استفاده از این خاصیت می توان رنگ بگراند عناصر را تغییر داد. و مقداری که می گیرد همانند مقداری است که خصوصیت color می گیرد، یعنی همان، تابع rgb و rgba، هگزادسیمال و رنگ های استاندارد.

مثال : استفاده از خاصیت color و background-color

1 <h2> 7Learn.com </h2>
2 <p> Javascript and Web Design Tutorials </p>

و کد css

1 Body { background-color: #1e90ff; }
2 H2 , p {
3     color: #000;
4     background-color: rgba(0,255,255,.25);
5 }

نتیجه در مرورگر:

bg color <a  style=آموزش CSS ( فصل چهارم) : کار با رنگ ها و تصویر زمینه" title="bg-color" width="374" height="246" />

خصوصیت background-image

با استفاده از این خاصیت می توان برای عناصر پس زمینه تعریف کرد. و قاعده کلی آن به صورت زیر است :

1 Background-image: url('Image Address');

و بجای کلمه Image Address آدرس تصویر قرار می گیرد.

به طور مثال:

1 Body { background-image: url('images/bg.png'); }
2 P , h2 { background-color: rgba(120,140,250,.25); }

bg image <a  style=آموزش CSS ( فصل چهارم) : کار با رنگ ها و تصویر زمینه" title="bg-image" width="354" height="262" />

خصوصیت background repeat

با استفاده از این خاصیت می توان نحوه تکرار عکس در پس زمینه را کنترل کرد و یکی از چهار مقدار زیر را می پذیرد:

  • Repeat : تکرار عکس در دو جهت افقی و عمودی
  • Repeat-x : تکرار عکس در جهت افقی (horizental)
  • Repeat-y : تکرار عکس در جهت عمودی (vertical)
  • No-repeat : عدم تکرار عکس

مثال:

1 <h2> 7Learn.com </h2>
2 <p> Javascript and Web Design Tutorials </p>

و کد css :

1 Body {
2     Background-image: url('images/bg.png');
3     Background-repeat: repeat-x;
4     Background-color: #000;
5     Color: #f00;
6 }

نتیجه در مرورگر:

bg repeat <a  style=آموزش CSS ( فصل چهارم) : کار با رنگ ها و تصویر زمینه" title="bg-repeat" width="539" height="369" />

می بینید که تصویر فقط در جهت افقی (عرض صفحه) تکرار شده...

خصوصیت background-attachment

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

  • Fixed : با اسکرول شدن محتوا، عکس پس زمینه  در جای خود ثابت بماند.
  • Scroll : با اسکرول شدن محتوا، عکس پس زمینه نیز اسکرول شود. (مقدار پیشفرض)

مثال :

1 <h2> 7learn.com </h2> * <h2> 7learn.com </h2> * <h2> 7learn.com </h2> * <h2> 7learn.com </h2> * <h2> 7learn.com </h2> …..

 و کد سی اس اس:

1 Body {
2     Background-color: blue;
3     Background-image: url('images/bg.png');
4     Background-repeat: repeat-x;
5     Background-attachment: fixed;
6 }

نتیجه کد

خصوصیت background position

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

  • کلمات کلیدی:

مقادیر افقی: left , center , right

مقادیر عمودی : top , center , bottom

مثال :

1 Background-position : left center;
  • مقادیر درصدی :  که در اول باید موقعیت افقی و سپس موقعیت عمودی ذکر شود.

مثال:

1 Background-position : 20% 65%;

دستور فوق مشخص می کند که تصویر پس زمینه باید 20% به سمت داخل در جهت افقی(به سمت راست) و 65% به سمت داخل در جهت عمودی (به سمت پایین) قرار بگیرد.

  • مقادیر عددی : این مقادیر نیز عددی بر حسب یکی از واحد های محاسباتی در زبان css هستند:

مثال :

1 Background-position : 5px 10px;

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

ترکیب مقادیر عددی و درصدی و همچنین استفاده از مقادیر منفی برای این خصوصیت مجاز است، اما مقادیر عددی و درصدی نمی توانند با مقادیر کلیدی ترکیب شوند:

مثال :

1 Background-position : 20% 30px;

کوتاه نویسی خصوصیت های خاصیت background

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

قاعده کلی :

1 Background: background-color | background-image | background-repeat | background-attachment | background-position;

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

مثال:

1 Body {
2 Background: #0c0 url("images/bg.png") no-repeat fixed bottom right;
3 }

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

منبع : 7learn.com

ارسال نظر