گروه مقاله : CSS3
تاريخ انتشار : 1394/03/03 - 10:55
كد :544
CSS3 Backgrounds
CSS3 شامل چند خاصیت جدید، برای پس زمینه ها است که به شما اجازه می دهد روی پس زمینه عناصر، کنترل بیشتری داشته باشید.
در این فصل یاد می گیرید که چطور چند تصویر پس زمینه مختلف را به یک عنصر اضافه کنید.
همچنین با خاصیت های زیر در CSS3 آشنا می شوید:
-
background-size
-
background-origin
-
background-clip
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
background-image (with multiple backgrounds) |
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 |
Firefox, Chrome, Safari, Internet Explorer 9 و Opera خاصیت های جدید پس زمینه را پشتیبانی می کنند.
استفاده از چند پس زمینه در 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
خاصیت Background Size به شما این امکان را می دهد تا اندازه تصویر پس زمینه را مشخص کنید.
تا قبل از CSS3، ما باید تصویر پس زمینه را ابتدا کوچک می کردیم و سپس آنرا استفاده می کردیم. ولی در CSS3 می توانید از یک پس زمینه در چند اندازه مختلف استفاده نمایید.
برای مشخص کردن اندازه می توانید از پیکسل (px) یا درصد (%) استفاده نمایید. اگر اندازه را به درصد مشخص کنید، تصویر خروجی به طول و عرض عنصر والد بستگی خواهد داشت.
مثال
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
استفاده از مقادیر "contain" و "cover" برای خاصیت background-size
#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-origin در CSS3
در CSS3 از ویژگی background-origin برای مشخص کردن مکان قرار گیری پس زمینه، استفاده می شود.
تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد.
مثال
#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خصوصیت های پس زمینه در CSS3
|
خاصیت |
توضیحات |
|
background |
تنظیم همه خاصیت های پس زمینه |
|
background-image |
تنظیم یک یا چند تصویر پس زمینه برای یک عنصر |
|
background-origin |
مکان قرار گیری پس زمینه |
|
background-size |
اندازه تصویر پس زمینه |