آموزش ویژگی opacity در CSS

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

یک تصویر شفاف

ویژگی opacity می تواند یک مقدار از 0.0 تا 1.0 داشته باشد. هرچه این عدد کمتر باشد، میزان شفافیت بیشتر خواهد بود.

opacity 0.2

opacity 0.5

opacity 1
(پیش فرض)

مثال شماره 1

img {
  opacity: 0.5;
}

امتحان کنید

ایجاد افکت Hover شفاف

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

مثال شماره 2

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

امتحان کنید

توضیح مثال بالا

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

opacity:1;

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

مثال شماره 3

img:hover {
  opacity: 0.5;
}

امتحان کنید

جعبه ی شفاف

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

مثال شماره 4

div {
  opacity: 0.3;
}

امتحان کنید

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

اگر نمی خواهید به فرزندان یک عنصر،مانند مثال بالا، شفافیت(opacity) اعمال شود، می توانید از مقادیر RGBA استفاده کنید. در مثال زیر، برای رنگ پس زمینه شفافیت ایجاد شده است اما برای متن آن، چیزی اعمال نشده است:

100% opacity

60% opacity

30% opacity

10% opacity

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

rgba(red, green, blue, alpha)

پارامتر alpha، یک عدد بین 0 (کاملاً شفاف) و 1.0 (کاملاً غیر شفاف) می باشد.

نکته: در مورد رنگ های RGBA، در مقاله ی رنگ ها در CSS، نکاتی بیشتری وجود دارد که می توانید مطالعه کنید.

مثال شماره 5

div {
  background: rgba(76, 175, 80, 0.3) /* پس زمینه ی سبز با 30 درصد شفافیت */
}

امتحان کنید

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

مثال شماره 6

 <html>
<head>
<style>
div.background {
  background: url(other/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>این مقداری متن درون یک جعبه ی شفاف است</p>
  </div>
</div>

</body>
</html>

امتحان کنید

توضیح مثال بالا

ابتدا یک عنصر <div> با کلاس class="background" ایجاد می کنیم که یک تصویر پس زمینه و یک کادر(border) دارد. سپس یک عنصر <div> دیگر با کلاس class="transbox" درون <div> اول ایجاد می کنیم. عنصر <div class="transbox"> یک زنگ پس زمینه و یک کادر دارد - این <div> شفاف است. درون این <div> شفاف، ما مقداری متن درون یک عنصر <p> قرار داده ایم.

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

JComments