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

آموزش BackGround در CSS3

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

خاصیت های مربوط به پس زمینه در CSS 3

CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند.
در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم.
همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:

background-size background-origin background-clip

مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند

افزودن چندین پس زمینه در CSS 3

CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید.
تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است.
مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).

مثال:
                                 
                    #example1 { 
                        background-image: url(img_flwr.gif), url(paper.gif); 
                        background-position: right bottom, left top; 
                        background-repeat: no-repeat, repeat; 
                    }
                

می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصيت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعيين به صورت خاصيت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق.
مثال زیر از روش اول برای این منظور بهره می گیرد:

                                                      
                    #example1 { 
                        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
                    }
                

خاصیت background-size در CSS 3

پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید.
اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد.
مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل):
تصویر اصلی:

خاصیت background-size

زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:

خاصیت background-size

کد لازم برای عملیات فوق:

                                                      
                    #div1 { 
                        background: url(css3.jpg); 
                        background-size: 100px 80px; 
                        background-repeat: no-repeat; 
                    }
                

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

                                                                   
                        #div1 { 
                            background: url(img_flower.jpg); 
                            background-size: contain; 
                            background-repeat: no-repeat; 
                        } 
                        #div2 { 
                            background: url(img_flower.jpg); 
                            background-size: cover; 
                            background-repeat: no-repeat; 
                        }
                

اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید

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

مثال:
                                                                                    
                        #example1 { 
                            background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
                            background-size: 50px, 130px, auto; 
                        }
                

تصویر پس زمینه ی تمام صفحه

اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد.
شرایط لازم برای چنین تصویر به شرح زیر می باشد:

  • کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)
  • تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند
  • تصویر در مرکز صفحه قرار گیرد
  • سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود

مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:

       
                    html {
                    background: url(img_flower.jpg) no-repeat center center fixed;
                    background-size: cover;
                

خاصیت background-origin در CSS3

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

  • border-box – تصویر پس زمینه از گوشه ی بالا سمت چپ خط حاشیه عنصر شروع می شود.
  • padding-box – (پیش فرض) پس زمینه عنصر، با کمی فاصله از گوشه ی بالا و سمت چپ المان مربوطه آغاز می شود
  • content-box - نقطه شروع پس زمینه المان با توجه به محتویات و محل شروع آن تنظیم می شود

مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:

     
                    #example1 {
                    border: 10px solid black;
                    padding:35px;
                    background:url(img_flwr.gif);
                    background-repeat: no-repeat;
                    background-origin: content-box;
                    }
                

خصوصیت background-clip در CSS3

این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود.
خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:

  • border-box – (پیش فرض) این امکام را فراهم می کند تا پس زمینه المان، تمام محدوده آن را بپوشاند (در واقع پس زمینه تا لبه ی خارجی خط حاشیه را پوشش می دهد)
  • padding-box – پس زمینه عنصر همه ی سطح عنصر را تحت پوشش قرار می دهد و تنها کمی از حاشیه عنصر خالی می ماند (پس زمینه گونه ی نگاشته می شود که تا لبه ی خارجی حاشیه ی درونی عنصر را تحت پوشش قرار می دهد)
  • content-box - پس زمینه عنصر فقط پشت محتویات عنصر را پوشش می دهد (تصویر پس زمینه تنها داخل محدوده ی محتوا منهای حاشیه ی درونی عنصر نگاشت می شود). برای مثال اگر عنصر شامل مقداری متن باشد، پس زمینه فقط پشت نوشته را می پوشاند

مثال زیر این خاصیت را کاربردی نمایش می دهد:

     
                    #example1 { 
                        border: 10px dotted black; 
                        padding:35px; 
                        background: yellow; 
                        background-clip: content-box; 
                    }
                

کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:

خاصیت
توصیف کاربرد
background
یک خاصیت مختصرنویسی که تمامی خصوصیت های مربوط به پس زمینه (background property) را در یک تعریف واحد مقداردهی و تنظیم می کند
background-clip
این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. ناحیه اصلی قرار گیری عنصر منهای خط حاشیه, حاشیه ی دور عناصر را تعیین می کند.
background-image
یک یا چند تصویر پس زمینه را ویژه ی تنها یک المان مشخص می کند
background-origin
محل قرار گیری تصویر یا تصاویر پس زمینه را تعیین می کند
background-size
اندازه و مقیاس تصویر یا تصاویر پس زمینه را مشخص می کند
  • 3113
  •    1450
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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