Background یا پیش زمینه در CSS

          M:A 
            بازدید : 297
          جمعه 25 اسفند 1391
           نظرات (0)
        

CSS3 Background

CSS3 جتد ویژگی جدید برای پیش زمینه ها دارد ، که به شما کنترل بیشتری را اهدا میکند .

در این درس شما با ویژگی های زیر آشنا می شوید :

background-size
background-origin

شما همچنین یاد میگیرید که چگونه از چند بکگراند استفاده کنید .

پشتیبانی مرورگر ها
پشتیبانی
مرورگر ها از CSS3 Border

فایرفاکس 3.6 و قدیمی تر برای این ویژگی نیاز به پیشوند -moz دارد .
سافاری 4 برای این ویژگی نیاز به پیشوند -webkit دارد .
اینترنت اکسپلورر 9 ، فایرفاکس 4 ، کروم و سافاری 5 و اپرا از ویژگی های جدید بکگراند پشتیبانی می کنند.
ویژگی background-size در CSS3

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

نمونه (با پیکسل)

div {
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

نمونه (با درصد)

div {
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

ویژگی background-origin در CSS3

در CSS3 از ویژگی background-origin برای مشخص کردن مکان پیش زمینه یا همان بک گراند استفاده میشود .
تصویر پیش زمینه میتواند در قسمت محتوا یا در مکان حاشیه یا مکان padding (فاصله از داخل) قرار بگیرد.

نمونه (background-origin)

div {
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

پیش زمینه های چندگانه با CSS3

با استفاده از CSS3 میتوانید از چندین بکگرند یکجا استفاده کنید

نمونه (استفاده از چند بکگراند)

body {
background-image:url(img_flwr.gif),url(img_tree.gif);
}

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
برچسب های HTML	1	1057	reza
یک فایل HTML چیست؟	0	606	reza
آموزش برنامه نویسی به زبان HTML	0	560	reza