شفافیت/شفافیت CSS

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

تصویر شفاف

شفافیت محدوده مقادیر این ویژگی بین 0.0 تا 1.0 است. مقدار کمتر، شفاف‌تر است:

قهوه

opacity 0.2

قهوه

opacity 0.5

قهوه

شفافیت 1

مثال

img {
  شفافیت: 0.5;
}

آزمایش کنید

تأثیر شفافیت

شفافیت این ویژگی معمولاً با :hover با استفاده از انتخابگرها، می‌توانیم در حالت hover تغییر شفافیت را اعمال کنیم:

گل رز
گل رز
گل

مثال

img {
  شفافیت: 0.5;
}
img:hover {
  opacity: 1.0;
}

آزمایش کنید

توضیح مثال

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

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

مثال اثر معکوس مرورگر:

گل رز
گل رز
گل

مثال

img:hover {
  شفافیت: 0.5;
}

آزمایش کنید

جعبه شفاف

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

شفافیت 1
شفافیت 0.6
شفافیت 0.3
شفافیت 0.1

مثال

div {
  شفافیت: 0.3;
}

آزمایش کنید

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

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

شفافیت 100%
شفافیت 60%
شفافیت 30%
شفافیت 10%

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

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

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

مثال

div {
  background: rgba(76, 175, 80, 0.3) /* شفافیت 30% رنگ سبز */
}

آزمایش کنید

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

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

مثال

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  مargins: 30px;
  رنگ پس‌زمینه: #ffffff;
  border: 1px solid black;
  شفافیت: 0.6;
}
div.transbox p {
  مargins: 5%;
  سبک فونت: تیره;
  رنگ: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>این چندین متن در یک قاب شفاف قرار دارد.</p>
  </div>
</div>
</body>
</html>

آزمایش کنید

توضیح مثال

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

سپس، ما یک <div> دیگر در اولین <div> ایجاد کرده‌ایم (class="transbox").

<div class="transbox"> دارای رنگ پس‌زمینه و حاشیه است - این div شفاف است.

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