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


تصویر شفاف

opacityملک می تواند یک مقدار از 0.0 را – 1.0. مقدار پایین تر ، شفاف تر:

مثال

img {
  opacity: 0.5;
}

اثر شناور شفاف

این opacityویژگی غالباً همراه با :hover انتخابگر برای تغییر تیرگی در موشواره استفاده می شود:

مثال

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

مثال توضیح داده شده

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

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

نمونه ای از اثر معکوس شناور:

مثال

img:hover {
  opacity: 0.5;
}

جعبه شفاف

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

مثال

div {
  opacity: 0.3;
}

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

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

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

مقدار رنگ RGBA با این موارد مشخص می شود: rgba (قرمز ، سبز ، آبی ، آلفا ). آلفا پارامتر عددی بین 0.0 (به طور کامل شفاف) و 1.0 (به طور کامل مات) است.

مثال

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

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

مثال

<html>
<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>
</html>

مثال توضیح داده شده

ابتدا یک عنصر <div> (class = “background”) با تصویر پس زمینه و حاشیه ایجاد می کنیم.

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

<div class = “transbox”> دارای رنگ زمینه و حاشیه است – div شفاف است.

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

منبع