جلسه ۴۷ – آموزش opacity در CSS

منظور از شفافیت چیست ؟ چگونه شفافیت را در تمامی تصاویر و کلاس های صفحه تغییر دهیم؟ منظور از Opacity چیست؟ چگونه کمی از تصویر را پنهان کنیم؟ این‌ها سؤالاتی هستن که قصد داریم تو این مقاله پاسخ بدیم و به‌طورکلی با Opacity یا شفافیت آشنا بشیم . به علاوه قراره با هم یاد بگیریم که که تغییر شفافیت عکس در صفحه وب چطوری انجام میشه و کم و زیاد کردن opacity در سایت چه مراحلی داره.

خاصیت opacity

خاصیت opacity، خاصیتیه که به وسیله اون، می‌تونیم شفافیت عناصر در CSS رو مشخص کنیم، در این مقاله از آموزش جامع css به شما یاد می‌دیم که چگونه از طریق اپاسیته، می‌تونیم یه عنصر رو عین روح محو کنیم یا برعکس، به شکل واضح نشونش بدیم.

خاصیت opacity می‌تونه ۲ مقدار متفاوت قبول کنه:

• اعداد بین 0 تا 1
• مقادیر بین 0% تا 100%

تمام عناصر صفحه وب که می‌سازیم، به صورت پیش فرض دارای مقدار شفافیت 1 یا 100% هستن. بنابراین ویژگی opacity معمولا برای محو تر کردن عنصر به کار می‌ره.

به مثال زیر توجه کنین:

نتیجه کد به صورت زیر ظاهر می‌شه:

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>

div{
   background-color:black;
   color:white;
   width:100px;
   height:100px;
   margin:5px;
   font-size: 3em;
}

.div1{
   opacity:1;
}

.div2{
   opacity:0.8;
}

.div3{
   opacity:0.6;
}

.div4{
   opacity:0.4;
}

.div5{
   opacity:0.2;
}

فراموش نکنیم که اگه مقادیر opacity رو به فرم زیر هم بنویسیم، مجددا نتیجه فوق رو بهمون می‌ده:

.div1{
   opacity:100%;
}
.div2{
   opacity:80%;
}
.div3{
   opacity:60%;
}
.div4{
   opacity:40%;
}
.div5{
   opacity: 20%;
}

تاثیر پذیری ویژگی Opacity از عنصر پدر

نکته ای که تو بحث تغییر شفافیت عناصر در CSS خیلی مهمه، اینه که با تغییر شفافیت یه عنصر، شفافیت عناصر فرزند اون عنصر هم تغییر ‌می‌کنه. به مثال زیر توجه کنین:

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

همزمان می‌خوایم که رنگ پیش زمینه div، محو و کم سو باشه. مسلما اولین و ساده ترین راهی که به ذهنمون می‌رسه، استفاده از ویژگی opacity برای عنصر div هست.

<div>mizfa.com</div>

div{
   opacity: 0.1;
   background-color:red;
   color:red;
   width:300px;
   height:100px;
   margin:5px;
   font-size: 3em;
}

این کد، نتیجه زیر رو بهمون می‌ده:

خب اینطوری که هیچی معلوم نیست! چرا؟

چون خاصیت opacity فقط روی پیش زمینه div تاثیر نذاشته، بلکه روی متن داخل div که عنصر فرزند اون محسوب می‌شه هم تاثیرگذار بوده.

اینجا از راه حل زیر استفاده می‌کنیم:

div{
    background-color:rgba(0,0,0,0.1);
   color:red;
   width:300px;
   height:100px;
   margin:5px;
   font-size: 3em;
}

همونطور که دیده می‌شه، خاصیت opacity رو حذف کردیم و به جای اون، از تابع ()rgba که تو مقاله مقادیر رنگ ()rgba و ()hsla باهم یاد گرفتیم، استفاده کردیم.

این تایع، به صورت خودجوش خاصیت opacity رو تو ذاتش داره که فقط روی رنگ عنصر تاثیر گذاره!

نتیجه به شکل زیر ظاهر می‌شه:

کاربرد های بیشتر

یکی از کاربرد های opacity در CSS، برای زمانیه که به وجود یک عنصر نیاز داریم،‌ ولی اون نباید دیده بشه. دو دستور برای برای کدر کردن عناصر با Opacity در CSS  وجود داره که می‌تونیم از اون‌ها استفاده کنیم:

/* Using opacity to hide our element */
div{
   opacity:0;
}
/* Using visibility to hide our element */
div{
   visibility: hidden; }

نکته‌ی مهم: خاصیت visibility هم در اینجا، به کمک مقدار hidden، کاملا شبیه به دستور opacity:0 عمل می‌کنه.

نکته: دستور display:none رو با دو دستوری که بالا دیدیم اشتباه نگیرین! دستور display:none به صورت کامل عنصر رو از صفحه حذف می‌کنه و به عناصر دیگه اجازه می‌ده که جای اون رو بگیرن.

پایان ترم آموزش opacity در CSS

سوال:

به یکی از مثال های مقاله مثال های بیشتر از پس زمینه در CSS برمی‌گردیم.

در شکل زیر، یک form رو مشاهده می‌کنیم که با کمک ()rgba، دارای پس زمینه شفافی شده.

form{
   background-color: rgba(0,0,0,0.6);
}

آیا استفاده از خاصیت opacity به جای ()rgba رو مجاز می‌دونین؟ چرا؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله، با خاصیت opacity در CSS آشنا شدیم.

خاصیت opacity، می‌تونست مقدار شفافیت یا کدر بودن عناصر ما رو مشخص کنه. مقادیر مورد قبول اون هم، اعداد ۰ تا ۱ و درصد های ۰ تا ۱۰۰ بودن. همچنین، دیدیم که خاصیت opacity، نه فقط بر یک عنصر خاص، بلکه بر فرزندان اون عنصر هم تاثیر می‌زاره.

نکته مهمی که یاد گرفتیم، این بود که دستور opacity:0 ، تفاوت بارزی با دستور display:none داره و بر خلاف display:none، عنصر رو از صفحه حذف نمی‌کنه و فقط پنهانش می‌کنه.

این هم از فصل شفافیت در CSS! با اینکه فصل ساده و سبکی بود، اما کار های جالبی می‌تونین باهاش انجام بدین. حتما مثال های بیشتری از عناصر شفاف تو سایت های مختلف ببینین و سعی کنین که کدش رو خودتون بزنین! 🙂

راستی، اگر در ابتدای یادگیری CSS هستید می‌تونید از مقاله CSS چیست و پیش نیازهای آن بازدید کنید و بعد، تک تک مراحل رایگان آموزش CSS رو در سایت میزفا دنبال کنید.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین. همینطور اگر به هرگونه حل مشکل شفافیت در CSS نیاز دارین و یا سؤالی براتون در مطرحه، با ما در میون بذارید تا پاسخ بدیم. امیدوارم از این مقاله آموزش طراحی سایت با CSS استفاده لازم رو برده باشید.

مدیر محتوا: علی اسمعیلی‌