ویژگی Opacity / Transparency

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی opacity میزان کدری / شفافی یک عنصر را مشخص می‌سازد.[۱]

تصویر شفاف

ویژگی opacity می‌تواند مقداری از ۰٫۰ تا ۱٫۰ داشته باشد. مقدار کمتر، میزان شفافیت بیشتر:

کدری ۰٫۲

کدری ۰٫۵

کدری ۱

(مقدار پیشفرض)

مثال
img {
  opacity: 0.5;
}


حالت hover شفاف

ویژگی opacity اغلب همراه با انتخابگر :hover برای تغییر میزان کدری (به انگلیسی: opacity) هنگام رویداد mouse-over استفاده می‌شود:

مثال
1 img {
2   opacity: 0.5;
3 }
4 
5 img:hover {
6   opacity: 1.0;
7 }


توضیح مثال

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

زمانی که نشانه‌گر موس از تصویر دور می‌شود، تصویر دوباره شفاف خواهد بود.

مثالی از حالت hover رزرو شده:

مثال
img:hover {
  opacity: 0.5;
}


جعبه شفاف

هنگام استفاده از ویژگی opacity برای اضافه‌کردن شفافیت به پس زمینه یک عنصر، تمامی عناصر فرزند آن میزان شفایت یکسانی را به ارث می‌برند. این امر خوانایی متن درون یک عنصر تمام شفاف رابسیار دشوار می‌کند:

مثال
div {
  opacity: 0.3;
}


شفافیت با استفاده از RGBA

اگر نمی‌خواهید که همانند مثال بالا، میزان کدری روی عناصر فرزند نیز اعمال شود، از مقادیر رنگی RGBA استفاده کنید. مثال زیر میزان کدری را برای رنگ پس زمینه و نه متن، تنظیم می‌کند:

در فصل رنگ‌ها در CSS آموختید، که می‌توانید از RGB به عنوان یک مقدار رنگ استفاده کنید. علاوه بر RGB، می‌توانید یک مقدار RGB را با یک کانال (alpha (RGBA استفاده کنید - که میزان کدری را برای یک رنگ مشخص می‌کند.

مقدار رنگی RGBA به صورت رو به رو مشخص می‌شود: rgba(red, green, blue, alpha). پارامتر alpha عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام مات) می‌باشد.

نکته: مطالب بیشتری را در مورد مقادیر رنگ RGBA در فصل رنگ‌ها در CSS خواهید آموخت.

مثال
div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}


متن در جعبه شفاف

این متنی است که درون جعبه شفاف قرار گرفته‌است.

مثال
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>


ابتدا، یک عنصر <div> با مقدار (class="background") با یک تصویر پس زمینه و کادر می‌سازیم.

سپس ما یک <div> دیگر (”class=”transbox) درون <div> اول می‌سازیم.

<”div class=”transbox> یک رنگ پس زمینه، و یک کادر (به انگلیسی: border) دارد - div شفاف است.

درون div شفاف، متنی را درون یک عنصر <p> اضافه می‌کنیم.

خود را با تمرینها امتحان کنید!


منابع آموزشی

  1. ↑ w3schools.com: CSS Opacity / Transparency



برگرفته از «https://wikicod.ir/w/index.php?title=CSS:ویژگی_opacity_/_transparency&oldid=8250»