سبد خرید (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

دیدگاه‌ها  

+6 # توران 1394-09-05 15:33
سلام و خسته نباشید.
چطور میشه پس زمینه عکس رو حذف کرد؟؟؟
به عنوان مثال، پس زمینه عکس سفید رنگه و تصویر یک گل رو داریم، من فقط میخوام تصویر گل، بدون پس زمینه سفید رنگ رو بر روی صفحه قرار بدم.
مچکرم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # saeedmpt 1394-09-14 23:11
این کار را با کد نویسی نمیشه انجام داد و باید به فوتوشاپ مراجعه کنید و پس از بریدن حاشیه تصویر عکس را به صورت png یا gif ذخیره کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

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

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

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

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