opacity در css

خصوصیت opacity در css میزان شفافیت یک المان را مشخص می کند.

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

img {
  opacity: 0.5;
}

opacity 0.2

opacity 0.5

opacity 1
(default)

opacity در css و ویژگی hover

می توان شفافیت را با hover ترکیب کرد تاهنگام حرکت ماوس بر روی المان مورد نظر، میزان شفافیت تغییر کند:

حالت دیگری وجود دارد که در آن، تصویر در حالت عادی opacity=1 دارد و با حرکت ماوس بر روی آن، میزان شفافیت تغییر می کند:

img:hover {
  opacity: 0.5;
}

در حالتی که ویژگی opacity در css را به background المانی اختصاص دهیم، تمام المان های فرزند (child)، آن مقدار شفافیت را می گیرند.
به عنوان مثال در کد زیر، opacity را به المان div اختصاص داده ایم و المان های p که فرزند div هستند نیز تحت تاثیر قرار گرفته اند:

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

شفافیت و RGBA

اگر نخواهیم که شفافیت روی المان های فرزند تاثیر بگذارد، می توانیم از روش RGBA استفاده کنیم.

در مثال زیر می بینید که شفافیت فقط به پس زمینه اختصاص یافته و متن آن تغییری نکرده است:

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

همان طور که در مبحث رنگ در css توضیح دادیم rgba(red, green, blue, alpha) مقدار آلفا (a) در rgba بیانگر میزان شفافیت است که مقدار آن از صفر (کاملا شفاف) تا ۱ (کاملا مات) تغییر می کند.

نوشتن متن در Transparent Box

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

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;
}

لینک مقاله مرجع