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

شفافیت را در تمامی ویژگی ها تغییر دهید.

آشنایی با ویژگی Opacity
آشنایی با ویژگی Opacity

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

خاصیت opacity

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

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

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

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

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

استفاده از opacity در CSS

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

<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 های متفاوت بر حسب اعداد بین ۰ و ۱

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

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

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

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

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

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

کم کردن opacity کانتینر حامل متن

<div>mizfa.com</div>
div{
   opacity: 0.1;
   background-color:red;
   color:red;
   width:300px;
   height:100px;
   margin:5px;
   font-size: 3em;
}

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

متن داخل کانتینر (div) نا واضح استخب اینطوری که هیچی معلوم نیست! چرا؟

چون خاصیت 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 رو تو ذاتش داره که فقط روی رنگ عنصر تاثیر گذاره!

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

استفاده از ()rgba برای حل مشکل نا واضح بودن متن

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

یکی از کاربرد های 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

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

نمونه بک گراند شفاف

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

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

  1. سلام
    به نظر من اگه از opacity استفاده کنیم کل form و عنصر داخلش محوتر میشه که نمای جالبی به سایت نمیده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=