دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » Opacity ( شفافیت ) در فیلم آموزش CSS به زبان فارسی
Opacity ( شفافیت ) در فیلم آموزش CSS به زبان فارسی

Opacity ( شفافیت ) در فیلم آموزش CSS به زبان فارسی

در این قسمت از فیلم آموزش CSS در مورد Opacity آموزش داده ام ، با استفاده از Opacity شفافیت یک عنصر را مشخص می کنیم . در جلسه قبل در مورد شبه عناصر آموزش داده بودم .

Opacity در CSS  :

opacity به معنی کدری ، تاری  است ولی در کامپیوتر به معنی شفافیت است ، با استفاده از این ویژگی در CSS می توانیم شفافیت عناصر را مشخص کنیم .
مقداری که Opacity می گیرد مقداری بین 0 تا 1  است ، مقدار صفر کمترین شفافیت و مقدار یک بیش ترین شفافیت را نشان می دهد .

حال شما می توانید از مقدار اعشاری بین عدد صفر تا یک استفاه کنید تا عددی را برای شفافیت عنصر مورد نظر خود تعیین کنید.
از این ویژگی به صورت زیر استفاده می کنیم :

کد CSS :

کد HTML :

در  مثال بالا شفافیت عکس را برابر مقدار 0.5 قرار داده ایم و این یعنی عکس به طور  کاملاً شفاف نمایش داده نخواهد شد و شفافیت آن نصف خواهد شد .

حتی می توانید از این ویژگی برای زمان Hover یا Active شدن عکس هم استفاده کنید یعنی وقتی Hover یا Acitve شد شفافیت آن تغییر کند ، مانند مثال زیر :

از Opacity فقط برای تصاویر استفاده نمی کنیم برای عناصر دیگر هم می توان از این ویژگی استفاده کرد اگر به مثال زیر توجه کنید به این موضوع پی خواهید برد :

سورس کد HTML :

کد CSS :

اگر سورس کد بالا را اجرا کنید و باکس ایجاد شده را Hover کنید خواهید دید که از شفافیت آن عنصر کاسته می شود .

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

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :


  1. میلاد گفت:

    باعرض سلام وخداقوت
    لطفا چندنمونه پروژه قراردهید برای یادگیری ورفع اشکال.
    یه سوال داشتم چرا وقتی هرعنصری با مختصات خاص خودش وارد صفحه میکنیم عناصر دیگر جابجا میشوند وکلا ترتیب صفحه بهم میخورد

    • رضا طوماری گفت:

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

جواب سوال چیه ؟ *