آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پس زمینه CSS

دوره های مرتبط با این مقاله

پس زمینه

از خصوصیت های (properties) پس زمینه ی CSS به منظور تعریف جلوه های (effect) پس زمینه ی المان ها استفاده می شود.
خصوصیت های CSS که ویژه ی جلوه های پس زمینه بکار برده می شوند به ترتیب زیر می باشد :

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

رنگ پس زمینه

خصوصیت background-color در واقع رنگ پس زمینه ی یک المان را مشخص می کند .
رنگ پس زمینه ی یک صفحه ی متعارف به صورت زیر تعریف (set) می شود :

مثال

نمونه یک

body {
    background-color: lightblue;
}

امتحان کنید

در CSS، رنگ یک صفحه اغلب توسط مقادیر زیر تعیین می شود :

  • در CSS، رنگ یک صفحه اغلب توسط مقادیر زیر تعیین می شود :
  • یک مقدار RGB (سرنام RED GREEN BLUE) – مانند rgb("255","0","0")
  • اسم رنگ دلخواه (color name) – مانند "red"
مثال

در مثال زیر، h1، p، و المان های div رنگ های پس زمینه ی متفاوتی دارند :

نمونه دو

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

امتحان کنید

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

خصوصیت background-image در حقیقت تصویری برای استفاده به عنوان پس زمینه ی یک المان تعریف می کند . به صورت پیش فرض، تصویر تکرار می شود تا بدین وسیله بتواند کل عنصر (element) مربوطه را تحت پوشش قرار دهد .
تصویر پس زمینه به صورت زیر انتخاب می شود :

نمونه سه

body {
    background-image: url("http://tahlildadeh.com/Temp/Css/paper.gif");
}

امتحان کنید

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

نمونه چهار

        body {
            background-image: url("bgdesert.jpg");
        }
امتحان کنید

تصویر پس زمینه – تکرار تصویر پس زمینه با نمای افقی و عمودی

به صورت پیش فرض، خصوصیت background-image یک تصویر را با هر دو نما یا صورت افقی و عمودی تکرار می کند . برخی از این تصاویر باید تنها به صورت افقی یا عمودی تکرار شوند، در غیر این صورت به گونه ای عجیب و نامتعارف به نظر می رسد، مشابه نمونه ی زیر :

نمونه پنج

body { background-image: url("http://tahlildadeh.com/Temp/Css/gradient_bg.png"); }

امتحان کنید

در صورتی که اگر تصویر مورد نظر تنها افقی تکرار شود( repeat-x) ، پس زمینه ظاهر بهتری پیدا خواهد کرد :

نمونه شش

body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }

امتحان کنید
نکته:

جهت تکرار تصویری به صورت عمودی از background-repeat: repeat-y; بهره بگیرید .

آموزش خاصیت های Image - Set position و no-repeat

به منظور نمایش تصویری برای تنها یکبار کافی است از خاصیت background-repeat بهره بگیرید (این خاصیت تعریف می کند که تصویر مربوطه تنها یک مرتبه تکرار شود) :

نمونه هفت

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

امتحان کنید

در مثال فوق، تصویر پس زمینه درست در مکانی یکسان با متن نمایش داده شده است .
حال می خواهیم موقعیت (position) تصویر را تغییر دهیم تا از این طریق تصویر مذکور شکل متن مورد نظر را برهم نزد .
موقعیت تصویر توسط خاصیت background-position تعیین می گردد :

نمونه هشت

        body {
            background-image: url("img_tree.png");
            background-repeat: no-repeat;
            background-position: right top;
        }
امتحان کنید

آموزش خاصیت Background - Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های فراوانی وجود دارند که حین پرداختن به پس زمینه و مدیریت آن باید درنظر گرفت .
به منظور کاهش حجم کد، این امکان وجود دارد که تمامی خصوصیت ها (properties) را در تنها یک خصوصیت تعریف کرد . خاصیت مذکور همچنین shorthand (خصوصیت مختصر نویسی) اطلاق می گردد .
خاصیت مختصرنویسی (shorthand property) ویژه ی پس زمینه همان "background": می باشد :

نمونه نه

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

امتحان کنید

به خاطر داشته باشید که هنگام استفاده از خصوصیت مختصر نویسی، ترتیب مقادیر property ها به صورت زیر خواهد بود :

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

هیچ اهمیتی ندارد اگر یکی از مقادیر property مفقود بوده یا در حال حاضر موجود نمی باشد، به خصوص تا زمانی که دیگر مقادیر موجود به ترتیبی که فوق ذکر شده سامان دهی شده باشند .
این مثال از نوع یا سطح پیشرفته ی CSS بهره می گیرد . تصویر همراه با بقیه ی صفحه، بالا یا پایین (scroll) نمی رود .
تمامی خصوصیت های پس زمینه ی CSS در جدول زیر تشریح شده :

خاصیت (property)
توصیف کاربرد
background
کلیه ی خصوصیت های پس زمنیه را طی (در) تنها یک تعریف (declaration) مشخص می کند
background-attachment
تعیین می کند آیا یک تصویر پس زمینه ثابت بوده و یا همراه با بقیه ی صفحه حرکت داشته و جا به جا شود (scroll)
background-color
رنگ پس زمینه ی یک عنصر را انتخاب می کند
background-image
تصویر پس زمینه ی یک المان را تعیین می کند
background-position
مکان شروع جای گیری یک تصویر پس زمینه را مشخص می کند
background-repeat
نحوه ی نمایش مجدد یا تکرار یک تصویر پس زمینه را تعیین می کند
  • 4480
  •    2288
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .