پس زمینه در CSS3

10 / 10
از 1 کاربر

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

• background-size (اندازه پس زمینه)
• background-origin (منشا پس زمینه)
• background-clip

چند تصویر زمینه در CSS3

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

در مثال زیر دو تصویر پس زمینه وجود دارد، اولین تصویر، عکس یک گل است (در قسمت پایین سمت راست قرار گرفته است) و تصویر دوم یک پس زمینه کاغذی است (در گوشه بالا سمت چپ قرار گرفته است).

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

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

ویژگی اندازه پس زمینه (background-size) در CSS3 امکان تعیین اندازه تصویز زمینه را به شما می دهد. در نسخه های قبلی CSS، اندازه تصویر پس زمینه، اندازه واقعی تصویر بود. اما در CSS3 این امکان وجود دارد که از تصویر پس زمینه در زمینه های مختلف، مجددا استفاده کنید. اندازه تصویر را می توان با طول (lengths)، درصد (percentages)، و یا با به کار بردن دو کلمه کلیدی؛ پوشش (contain) یا کاور (cover) مشخص کرد.

مثال 1:

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

مثال 2؛ تعیین اندازه با استفاده از پوشش (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)، در هنگام کار با پس زمینه چندگانه، چند مقدار برای تصاویر پس زمینه را نیز می پذیرد (با استفاده از یک کاما برای جداسازی).
در مثال زیر سه تصویر برای پس زمینه مشخص شده است و هر تصویر دارای مقدار اندازه پس زمینه مختلف هستند.

#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;
}

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

در صورتی که در طراحی سایت در نظر داشته باشیم که یک تصویر پس زمینه، تمام صفحه مرورگر را به طور دائم پوشش دهد باید مراحل زیر را در طراحی سایت و برنامه نویسی رعایت کنیم:

• پر کردن کل صفحه با تصویر (بدون فضای سفید)
• تعیین مقیاس مورد نظر برای تصویر
• تصویر را در وسط صفحه قرار دهیم
• عدم ایجاد اسکرول

مثال زیر نشان دهنده چگونگی انجام این مراحل است؛ از عناصر HTML استفاده کنید. سپس یک پس زمینه ثابت (fixed) و محور (centered) بر روی آن تنظیم کنید. در نهایت اندازه آن را با استفاده از ویژگی background-size تعیین کنید.

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

ویژگی منشا پس زمینه (background-origin) در CSS3

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

مثال زیر نشان دهنده این ویژگی است:

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

ویژگی background-clip در CSS3

در طراحی سایت این ویژگی تعیین کننده منطقه نقاشی در پس زمینه است و سه مقدار زیر را به خود می گیرد.

• border-box
• padding-box
• content-box

مثال :

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

ارسال نظر و نظرات ثبت شده