مثال (خصوصیت opacity)
تنظیم میزان شفافیت یک عنصر div:
div
{
opacity:0.5;
}
خودتان امتحان کنید » {
opacity:0.5;
}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت 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 | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
Change the opacity for an element
این مثال نحوه استفاده از JavaScript را برای تغییر میزان شفافیت یک عنصر نمایش می دهد.
میخاستم بدونم میشه بردر رو به حالت نیمه شفاف در اورد با خصوصیت opacity
من خودم از کدهای border-opacity و outline-opacity استفاده کردم نتیجه ای نگرفتم امکانش هست با css این عمل رو انجام داد ؟؟؟
تشکر از سایت خوب و اموزندتون
اگر به این روش به border مقدار css بدید، میتونید مقدار شفافیت رو برای اون تعیین کنید. به این صورت:
border: 1px solid rgba(255, 0, 0, 0.5);
در rgba سه عدد اول از 0 تا 255 مقدار دهی میشن که هر کدوم بیانگر مقدار رنگ‌های Red, Green & Blue هستند. مقدار چهارم بیانگر alpha هست که مقداری از 0 تا 1 را می‌گیرد و بیانگر شفافیت هست. هر چه به صفر نزدیک‌تر باشد، شفاف‌تر خواهد بود و بالعکس.