سبد (0)

تبلیغات

خصوصیت opacity

مثال (خصوصیت opacity)

تنظیم میزان شفافیت یک عنصر div:

div
{
opacity:0.5;
}
خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.


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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت opacityرا پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، از خاصیت جایگزین filter برای تنظیم شفافیت استفاده می کند. مانند: (filter:Alpha(opacity=50.


تعریف و کاربرد

با استفاده از خصوصیت opacity می توان میزان شفافیت یک عنصر را مشخص کرد.

مقدار پیشفرض 1
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.opacity=0.5

نحوه استفاده

opacity: value|inherit;
مقدارتوضیحاتنمایش دادن
value

میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.

نمایش دادن »
inherit  تعیین می کند که باید از والدش، ارث بری داشته باشد.  

مثالs

مثال - خودتان امتحان کنید

Change the opacity for an element

این مثال نحوه استفاده از JavaScript را برای تغییر میزان شفافیت یک عنصر نمایش می دهد.

دیدگاه‌ها  

0 # sajad 1395-07-22 14:28
سلام و خسته نباشید به همه
میخاستم بدونم میشه بردر رو به حالت نیمه شفاف در اورد با خصوصیت opacity
من خودم از کدهای border-opacity و outline-opacity استفاده کردم نتیجه ای نگرفتم امکانش هست با css این عمل رو انجام داد ؟؟؟
تشکر از سایت خوب و اموزندتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-23 00:04
با سلام و تشکر.
اگر به این روش به border مقدار css بدید، میتونید مقدار شفافیت رو برای اون تعیین کنید. به این صورت:
border: 1px solid rgba(255, 0, 0, 0.5);
در rgba سه عدد اول از 0 تا 255 مقدار دهی میشن که هر کدوم بیانگر مقدار رنگ‌های Red, Green & Blue هستند. مقدار چهارم بیانگر alpha هست که مقداری از 0 تا 1 را می‌گیرد و بیانگر شفافیت هست. هر چه به صفر نزدیک‌تر باشد، شفاف‌تر خواهد بود و بالعکس.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی