آموزش CSSآموزش طراحی سایت

جلسه ۴۷ – opacity در CSS

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

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

خاصیت opacity

خاصیت opacity، خاصیتیه که به وسیله اون، می‌تونیم شفافیت عنصر ها رو مشخص کنیم، این مقاله از آموزش جامع 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%;
}

تاثیر پذیری از عنصر پدر

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

فرض کنیم می‌خوایم یه عنصر 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 برای حل مشکل نا واضح بودن متن

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

یکی از کاربرد های دیگه این خاصیت، برای زمانیه که به وجود یک عنصر نیاز داریم،‌ ولی اون نباید دیده بشه.

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

/* 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 به صورت کامل عنصر رو از صفحه حذف می‌کنه و به عناصر دیگه اجازه می‌ده که جای اون رو بگیرن.

اگه جایی براتون سوالی چیزی پیش اومد، حتما تو قسمت نظرات بپرسین، با هم اوکیش می‌کنیم 🙂

پایان ترم

سوال:

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

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

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

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

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

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

نتیجه گیری

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

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

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

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

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

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

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

برچسب ها

نوید معدن نژاد

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر