خاصیت جدید background-sizeدر CSS3 با توضیحات کامل
با سلام
آقا ما یه خاصیت جدید داریم داخل سی اس اس 3 که background-sizeنام داره و به نظر من خیلی جالبه و متفاوته و میتونه بک گراند سایتمونو از یک نواختی و ریپید دربیاره.
خب بریم سر توضیحات اصلی:
از این خاصیت برای تعیین اندازه بک گراند سایت استفاده میشه . به این صورت که ما میتونیم از یه تصویر برای بک گراندمون استفاده کنیم به طوری که در هر حالتی صفحه ما رو پوشش کامل بده.به کد زیر نگاه کنید ، صفت اولی که میگیره auto هستش:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:auto;
}
در کد بالا اندازه تصویر به هر اندازه ای که باشه به همون اندازه نمایش داده میشه
حالت بعدی ، حالتیه که ما خودمون بهش اندازه میدیم . به مثالی که در زیر آمده توجه کنید:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
در کد بالا اندازه بک گراندمو 100 پیکسل مقدار دهی کردم که به همین مقیاسی که دادم بزرگ میشه.
حالت بعدی استفاده از خاصیت coverهستش که در این حالت تصویر استفاده شده در بک گراند به صورت تمام صفحه نمایش داده میشه(کل بک گراند رو پوشش میده) که فکر کنم پر کاربرد ترین حالت باشه.به صورت زیر:
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
البته حالت های دیگه ای هم داره که من پرکاربرد ترین حالتهاشو اینجا آوردم.
درضمن از این خاصیت مرورگر های اینترنت اکسپلورر 9 به بالا و بقیه مرورگر ها هم به راحتی پشتیبانی میکنن.
امیدوارم مفید واقع بشه.
موفق باشید.
نویسنده :

X
پلاگین نمایش افراد آنلاین در 24 ساعت گذشته
سلام با استفاده از این پلاگین میتونید افراد آنلاین در 24 ساعت گذشته انجمنتون رو در صفحه اصلی انجمن ...
تعیین نشده
دیدگاه های کاربران 2

پاسخ مسئول
ارسال: 2
آموزش واقعا خوبی بود
مخصوصا ویژگی cover که برای خیلی ها کاربرد داره چون دوست دارن از یک بک گراند به طور کامل در انجمن هاشون استفاده کنید

image
ارسال: 3
(2014-04-26T22:27:56+00:00 2014-04-26T22:27:56+00:00)MybbCo نوشته :  آموزش واقعا خوبی بود
مخصوصا ویژگی cover که برای خیلی ها کاربرد داره چون دوست دارن از یک بک گراند به طور کامل در انجمن هاشون استفاده کنید

دقیقا برای خودمم هم خیلی جالب بود برای همین گفتم به اشتراک بزارم
خوشحالم که استقبال شد

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :