ویژگی Opacity / Transparency

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

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

تصویر شفاف

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

کدری ۰٫۲

کدری ۰٫۵

کدری ۱

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

مثال 

img {
  opacity: 0.5;
}


حالت hover شفاف

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

مثال 

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}


توضیح مثال

اولین بلوک 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:Tutorial/Opacity&oldid=23830»