تغییر رنگ و تصویر پس زمینه در CSS
Your browser doesn't support video.
Please download the file: video/mp4
درودی دوباره خدمت شما دوستان و علاقه مندان به آموزش طراحی وب. من علیرضا حاتمی نیا هستم با آموزش HTML و CSS از سری آموزش های برنامه نویسی در خدمت شما هستم.
در جلسه قبل با شیوه استفاده از رنگ ها در وب آشنا شدید. در این قسمت با تغییر رنگ و تصویر پس زمینه در CSS آشنا خواهید شد.
تغییر رنگ و تصویر زمینه صفحه در گذشته
قبل از تکامل CSS در وب، طراحان برای تغییر رنگ زمینه صفحه و دیگر اجزا از خصوصیت bgcolor و background در HTML استفاده می کردند. این خصوصیات دارای محدودیت های زیادی بود و توسعه سند وب در آینده را بسیار سخت می کرد.
با ظهور و پیشرفت CSS کار طراحان برای طراحی بسیار راحت شد. در ادامه به معرفی خصوصیات CSS مربوط به تغیر رنگ و تصویر پس زمینه در وب می پردازیم.
خصوصیت background در css
در CSS برای تغییر رنگ و تصویر زمینه صفحه و دیگر از اجزا از 5 خصوصیت استفاده می کنند
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
خصوصیت background-color
برای تغییر رنگ پس زمینه از خصوصیت background-color استفاده می کنند. مقدار این خصوصیت می تواند نام رنگ، کد رنگ به صورت rgb و یا کد رنگ به صورت هگزا دسیمال باشد.
مثال برای background-color
h1 {background-color: #6495ed;}
p {background-color: red;}
div {background-color: rgb(200,50,90);}
خصوصیت background-image
برای تغییر رنگ پس زمینه از خصوصیت background-image استفاده می شود. کافیست آدرس تصویر مورد نظر را در یک url به عنوان مقدار این خصوصیت تعیین کنید.
body {
background-image: url("image2.jpg ");
توجه داشته باشید که تصویر انتخابی به صورت پیش فرض در محور x و y تکرار می شود.
اما جهت تغییر این روند چه باید کرد ؟ یا مثلا برای عدم تکرار عکس یا تکرار عکس فقط در محور x یا فقط تکرار در محور Y؟
خصوصیت background-repeat
برای عدم تکرار تصویر پس زمینه کافیست مقدار background-repeat را برابر no-repeat قرار دهید:
background-image: url("image2.jpg ");
background-repeat: no-repeat;
برای تکرار تصویر زمینه فقط در محور x مقدار background-repeat را برابر repeat-x قرار دهید:
background-image: url("image2.jpg ");
background-repeat: repeat-x;
برای تکرار تصویر زمینه فقط در محور y مقدار background-repeat را برابر repeat-y قرار دهید:
background-image: url("image2.jpg ");
background-repeat: repeat-y;
خصوصیت background-position
برای تغییر مکان تصویر زمینه در وب از خصوصیت background-position استفاده می کنیم . مقادیری که این خصوصیت می تواند داشته باشد به صورت زیر است :
تصویر با استفاده از عبارات کلیدی left, right,bottom,top,csnter روی محور x و y تغییر وضعیت می دهد.
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
روی محور x و y با مقادیر درصد تغییر وضیعت می دهد.
x% y%
با استفاده از مقادیر به صورت اندازه ای (مثلا پیکسل) روی محور x و y تغییر وضعیت می دهد.
xpos ypos
مقدار پیش فرض انتخاب می شود.
Initial
خوصیت والد خود را به ارث می برد
Inherit
مثال:
background-image: url("image2.jpg ");
background-repeat: no-repeat;
background-position: right top;
خصوصیت background-attachment
برای ثابت نگه داشتن تصویر زمینه در صفحات scroll دار می توانید از خصوصیت background-attachment استفاده کنید. مقدار پیش فرض این خصوصیت scroll می باشد که برای ثابت کرد تصویر پس زمینه بایستی مقدار این خصوصیت را fixed کنید.
background-image: url("image2.jpg ");
background-repeat: no-repeat;
background-attachment: fixed
ترتیب نوشتن مقادیر به صورت زیر است:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
نکته : می توانید مقادیر دلخواه را حذف نمایید ولی ترتیب نوشتن آن ها حتما باید رعایت شود.
نظرات کاربران