cssblog.ir logo
P

opacity

تعیین میزان شفافیت (حالت مانند شیشه در CSS)

میزان شفافیت یا همان transparency عناصر را در صفحات وب می‌توان با استفاده از مشخصه opacity تعیین نمود. این مشخصه روی محتوای عناصر نیز تاثیر می گذارد

در مباحث مربوط به گرافیک کامپیوتریtransparency به معنی میزان شافیت اجسام است و منظور از شفافیت میزان نمایان بودن اجسامی است که در پشت جسمtransparent قرار دارند. با این تفسیر، مشخصهopacity در CSS که مقدارهایی بین ۰ تا ۱ را قبول می کند.

مقدار ۱ بیانگر واضح بودن (solid بودن) کامل و مقدار ۰ یعنی کاملا شفاف (طوری که جسم اصلا دیده نمی شود) و بسته به مقدار وارد شده برایopacity میزانtransparency عنصر تعین خواهد شد.

مثال:

مقدار پیشفرض و ارث بری

در CSS تمام عناصر در حالت پیشفرض opacity: 1دارند و عناصر پشت سر آنها دیده نمی‌شوند. همچنین نکته مهمی درباره ارث بری این مشخصه وجود دارد و آن این است که این مشخصه توسط فرزندان یک عنصر به ارث برده نمی‌شود اما از آنجائیکه میزانopacity والد به روی فرزندان نیز تاثیر خواهد گذاشت، فرزندان نمی‌توانند مقدارopacity بیشتر از والد خود داشته باشند.

مثال: 

مرورگرهای IE قدیمی

معمولا نسخه های قدیمی IE (نسخه ۸ به پایین)  مشکلاتی در پشتیبانی از این ویژگی دارند و اگر بخواهیم CSS ما با آنها نیز سازگارباشد باید استایل خود را به این شکل بنویسیم (به نقل از css-tricks) :

.opaque {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7
  
  /* Modern Browsers */
  opacity: 0.5;
}


شباهت به visibility

اگر مقدارopacity یک عنصر برابر با ۰ وارد شود نتیجه کار از لحاظ رفتار مرورگر مشابه با مشخصه visibility هنگامی که visibility: hiddenباشد، خواهد بود.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند