خصوصیت opacity
مثال (خصوصیت 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 را برای تغییر میزان شفافیت یک عنصر نمایش می دهد.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7405
دیدگاه‌ها
سلام و خسته نباشید به همه
میخاستم بدونم میشه بردر رو به حالت نیمه شفاف در اورد با خصوصیت 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 را می‌گیرد و بیانگر شفافیت هست. هر چه به صفر نزدیک‌تر باشد، شفاف‌تر خواهد بود و بالعکس.