CSS3  دارای چند خصوصیت پس زمینه ی جدید است که امکان کنترل بیشتری را روی عنصر پس زمینه می دهد
  • 1395/3/18 6/7/2016 4:30:15 PM 6/7/2016 4:30:15 PM
  • 0
  • 435

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

  • Background-size
  • Background-origin
  • background-clip

پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

Property

IE

Chrome

Firefox

Safari

Opera

background-image

( با چند پس زمینه )

9.0

4.0

3.6

3.1

11.5

background-size

9.0

4.0
1.0 -webkit-

4.0
3.6 -moz-

4.1
3.0 -webkit-

10.5
10.0 -o-

background-origin

9.0

1.0

4.0

3.0

10.5

background-clip

9.0

4.0

4.0

3.0

10.5


پس زمینه های چندتایی CSS3

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

 

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

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

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


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

خصوصیت background-size  اندازه ی تصاویر پس زمینه را مشخص می کند. قبل از CSS3 ، اندازه ی تصویر پس زمینه همان اندازه ی واقعی تصویر بود. در حالی که CSS3 به ما امکان می دهد که بتوانیم  از تصاویر پس زمینه در جاهای مختلف به منظورهای مختلف استفاده کنیم. اندازه می تواند به صورت مقدار طولی یا به صورت درصدی و یا با استفاده از دو کلمه کلیدی contain و cover مشخص شود.

مثال زیر تصویر پس زمینه را طوری تغییر می دهد که اندازه ی آن کوچکتر از اندازه ی تصویر واقعی می شود ( در این مثال از واحد پیکسل استفاده شده است)

تصویر پس زمینه ی اصلی:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

تصویر پس زمینه کوچک شده:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

که کد آن به صورت زیر است:

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

دو مقدار ممکن دیگر برای background-size  کلمات کلیدی contain و cover  هستند.

کلمه کلیدی 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 fixed; 
    background-size: cover;
}


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

خصوصیت background-origin موقعیت قرار گرفتن تصویر پس زمینه را مشخص می کند. این خصوصیت می تواند مقادیر  content-box, padding-box, or border-box بگیرد:

  • border-box : تصویر پس زمینه از گوشه بالا-چپ مرز شروع می شود
  • padding-box: ( پش فرض است) تصویر پس زمینه از گوشه بالا-چپ ناحیه ی padding شروع می شود.
  • 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

خصوصیت background-clip ناحیه ی ترسیم پس زمینه را مشخص می کند.

این خصوصیت می تواند سه مقدار مختلف را بگیرد:

  • border-box: ( پیش فرض است ) پس زمین از لبه ی بیرونی مرز شروع می شود
  • padding-box: تصویر پس زمینه از لبه ی بیرونی لایه padding شروع می شود
  • content-box: تصویر پس زمینه در داخل ناحیه محتوا ترسیم می شود.

مثال زیر خصوصیت background-clip را توضیح می دهد:

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


خصوصیات background  در CSS3

 

خصوصیت

شرح

background

یک کوتاه نوشت برای مشخص کردن تمام خصوصیات پس زمینه در یک عبارت است

background-clip

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

background-image

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

background-origin

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

background-size

اندازه ی تصاویر پس زمینه را تعیین می کند

محمد انصاری

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

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
پس زمینه های CSS3
زیگماوب