فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

background در css

background در css:

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

انواع background در CSS عبارت اند از :

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

 صفت background-color

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

                        } body 
 ;background-color: lightblue
                             {

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

  • یک نام معتبر برای یک رنگ – مانند “red”
  • یک مقدار هگزادسیمال – مانند “ff0000#”
  • یک مقدار RGB – مانند “(rgb(255,0,0”

در مثال زیر ، عناصر <p> ، <h1> و <div> هرکدام رنگ background متفاوتی دارند :

                         } h1 
    ;background-color: green
                            {

                        } div 
;background-color: lightblue
                            {

                          } p 
   ;background-color: yellow
                            {

شفافیت(opacity):

ویژگی opacity شفافیت یک عنصر را مشخص می کند.این می تواند یک مقدار از ۰٫۰ تا ۱٫۰ باشد. مقدار هر چه پایین تر باشد،شفافیت بیشتر میشود.
مثال:
                      } div 
 ;background-color: green
            ;opacity: 0.3
                          {

صفت background-image:

صفت background-image یک تصویر را به عنوان تصویر پشت زمینه ی یک عنصر مشخص میکند. به صورت پیشفرض، تصویر آنقدر تکرار خواهد شد تا فضای کل عنصر را پوشش دهد.

صفت background-image برای یک صفحه به صورت زیر تنظیم میشود :

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

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

                                    } body 
   ;("background-image: url("bgdesert.jpg"
                                         {

 نکته: به یاد داشته باشید که هنگام استفاده از صفت background-image از تصاویری استفاده کنید که به خوانایی متن آسیب نزند.

Background Image – تکرار به صورت افقی و عمودی

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

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

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

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

Background Image – تنظیم صفات position و no-repeat

نمایش تصویر background تنها یک بار و بدون تکرار در جهات افقی و عمودی، توسط صفت background-repeat انجام میپذیرد :

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

در مثال ذکر شده در بالا تصویر background در همان مکانی که متن نمایش داده میشود قرار میگیرد. ما میخواهیم مکان تصویر را تغییر دهیم تا به خوانایی متن آسیبی وارد نشود.

مکان یک تصویر توسط صفت background-position تعیین میشود. در نمونه مثال زیر مکان تصویر سمت راست و بالا در نظر گرفته شده است :

                                      } body 
   ;("background-image: url("gradient_bg.png
               ;background-repeat: no-repeat
             ;background-position: right top
                                           {

Background Image – مکان ثابت برای تصویر

برای اینکه تصویر background ثابت بماند و با ادامه ی صفحه اسکرول نخورد از صفت background-attachment استفاده میشود.

نحوه ی استفاده از این صفت در نمونه کد زیر مشخص شده است :

                                      } body 
   ;("background-image: url("gradient_bg.png
               ;background-repeat: no-repeat
             ;background-position: right top
               ;background-attachment: fixed
                                           {

Background – صفت کوتاه شده

برای کوتاه نویسی در کد، این امکان وجود دارد که تمام صفات background را در یک صفت گنجاند که به این صفت ، صفت shorthand (کوتاه شده) میگویند. نمونه مثال زیر نحوه ی استفاده از صفت کوتاه شده برای صفات background را نشان میدهد :


                                                          } body 
    ;background: #ffffff url("img_tree.png") no-repeat right top
                                                               {
دیدگاه‌های نوشته