سی ایس ایس ناپوشی/شفافیت

شفافیت اس پر متعلق پروپرٹی کا مقصد عناصر کی ناپوشی/شفافیت کو پتہ لگانا ہے۔

شفاف تصویر

شفافیت اس کا مقصد ناپوشی کا رینج 0.0 سے 1.0 تک ہے۔ کیونکہ اس کا رینج کم ہوگا تو اس کی ناپوشی زیادہ ہوگی:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

شفافیت 1

مثال

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

خود کو بچھائیئے

شفاف موس کا اثر

شفافیت عادی طور پر اس ساتھ استعمال کیا جاتا ہے :hover اس سیکشن کا استعمال کریں تاکہ موس پر کسی کسی کی سلیکشنر کی مدد سے کسی کسی کی ناپوشی کو تبدیل کیا جاسکے:

تولپ
تولپ
گل

مثال

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

خود کو بچھائیئے

مثال کی تفسیر

پہلا CSS بلک کا مطلب یہ ہے کہ وہ مثال 1 میں کا کد ہے۔ اس کے علاوہ، ہم نے اس کا ایک ایسا اثر بھی شامل کیا ہے جو کہ جب یوزر کوئی تصویر پر موس کا پتھر لگا تو اس کا اثر ہو۔ اس صورت میں جب یوزر کوئی تصویر پر موس کا پتھر لگا تو ہم چاہتے ہیں کہ تصویر ناپوشی کی جائے۔ اس کا اس سی ایس ایس ہے شفافیت:1;.

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

مثال اثر معکوس نگاه کردن به تصویر:

تولپ
تولپ
گل

مثال

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

خود کو بچھائیئے

جعبه شفاف

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

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

مثال

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

خود کو بچھائیئے

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

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

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

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

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

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

مثال

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

خود کو بچھائیئے

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

این‌ها متونى هستند كه در جعبه شفاف قرار دارند.

مثال

<html>
<head>
<style>
div.background {
  پس‌زمینه: url(klematis.jpg) تکرار;
  کناره: 2px خطی سیاه;
}
div.transbox {
  مجال: 30px;
  رنگ پس‌زمینه: #ffffff;
  کناره: 1px خطی سیاه;
  شفافیت: 0.6;
}
div.transbox p {
  مجال: 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> عناصر میں کچھ متن اضافہ کرتے ہیں。