سبد (0)

آموزش‌های پیشنهادی فرادرس

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

پس زمینه در CSS3

Wiki

در CSS3 چند خاصیت جدید، برای پس زمینه ها اضافه شده است.

که به شما اجازه می دهد روی پس زمینه عناصر، کنترل بیشتری داشته باشید.

در این بیاموز با خاصیت های زیر آشنا می شوید:

  • background-size
  • background-origin

همچنین یاد خواهید گرفت که چگونه از چند پس زمینه مختلف استفاده کنید.


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

Wiki

خاصیتپشتیبانی مرورگرها
background-size
background-origin

 Firefox, Chrome, Safari, Internet Explorer 9 و Opera خاصیت های جدید پس زمینه را پشتیبانی می کنند.


 

خاصیت background-size در CSS3

Wiki

با استفاده از خاصیت background-size می توانید اندازه تصویر پس زمینه را مشخص نمایید.

تا قبل از CSS3، ما باید تصویر پس زمینه را ابتدا کوچک می کردیم و سپس آنرا استفاده می کردیم. ولی در CSS3 می توانید از یک پس زمینه در چند اندازه مختلف استفاده نمایید.

برای مشخص کردن اندازه می توانید از پیکسل (px) یا درصد (%) استفاده نمایید. اگر اندازه را به درصد مشخص کنید، تصویر خروجی به طول و عرض عنصر والد بستگی خواهد داشت.

مثال 1

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

div
{
background:url(images/CSS/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

مثال 2

بسط دادن تصویر پس زمینه (کشیدن):

div
{
background:url(images/CSS/img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

خاصیت background-origin در CSS3

Wiki

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

تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد.

مثال (تغییر اندازه تصویر پس زمینه در CSS3)

قرار دادن پس زمینه در محل content-box:

div
{
background:url(images/CSS/img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
خودتان امتحان کنید »

 

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

Wiki

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

مثال (تغییر اندازه تصویر پس زمینه در CSS3)

تنظیم 2 پس زمینه برای عنصر <body>:

body
{
background: url(/images/CSS/img_tree.gif),url(images/CSS/img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
خودتان امتحان کنید »

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

Wiki

خصوصیتتوضیحاتCSS
background-originمکان قرار گیری پس زمینه3
background-sizeاندازه تصویر پس زمینه3

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان