شفاف کردن اشیا و تصاویر در CSS

شفاف کردن اشیا و تصاویر رو در CSS

با استفاده از CSS شما می توانید تصویر با وضوح کم یا transparent ایجاد نمایید. این کار توسط خاصیت opacity انجام میشود و در واقع جزء امکانات CSS3 محسوب می شود.با استفاده از CSS و CSS3 کار های زیادی میتوان انجام داد ولی تغییر شفافیت(opacity) یک CSS Background Image یکی از آنها نیست. اگر شما اهل خلاقیت باشید راه های خلاقانه ی زیادی هست که بتوانیم با استفاده از آنها کاری کنیم که به نظر برسد شفافیت تصویر بکگراند را تغییر دادیم.
شفاف کردن اشیا و تصاویر در CSS شفاف کردن اشیا و تصاویر رو در css شفاف کردن اشیا و تصاویر در CSS transparent objects and images in css

شفاف کردن اشیا و تصاویر در css

شفاف کردن اشیا و تصاویر در CSS: خاصیت opacity

این خاصیت میزان شفافیت و وضوح یک عنصر را از ۰ تا ۱ مشخص می کند . برای مثال بوسیله این خاصیت می توانید شفافیت یک عکس را کم کرده و کاری نمایید تا محتویات پشت آن نیز دیده شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :

 

خاصیت opacity می تواند دارای یکی از ۲ مقدار زیر باشد :

opacity موارد مختلف خاصیت
توضیح مقدار
این پارامتر میزان شفافیت و وضوح یک عنصر را تعیین می کند . مقدار این خاصیت از ۱ تا ۰ بوده و هرچه از ۰ به سمت ۱ برود از شفافیت عنصر کاسته می شود .
صفر = وضوح کامل
۱ = عدم وضوح کامل
مقدار پیش فرض نیز یک است .  
value
این مقدار باعث می شود تا عنصر شفافیت خود را از عنصر مادر ( parent ) به ارث ببرد . inherit

پشتیانی در مرورگر های مختلف :

 
شفاف کردن اشیا و تصاویر در css شفاف کردن اشیا و تصاویر رو در css شفاف کردن اشیا و تصاویر در CSS opacityimg

شفاف کردن اشیا و تصاویر در css

Ie9, chrome, firefox, opera, safari همگی از این خاصیت حمایت می کنند. مقادیر این خاصیت می تواند اعدادی در بازه ۰٫۰ تا ۱٫۰ باشند. اگر مقدار خاصیت opacity به ۱ باشد، شی مورد نظر با وضوح کامل نمایش داده می شود و هر چقدر که از ۱ کمتر و به صفر نزدیکتر باشد از میزان وضوح تصویر کاسته می شود، چنانچه برابر با صفر قرار داده شود تصویر نامرئی خواهد بود.
در Ie8 و ماقبل این خاصیت باید به صورت زیر تعریف شود که X عددی بین ۰ تا ۱۰۰  می باشد که هر چه به عدد ۱۰۰ نزدیکتر باشد وضوح بیشتر و هر چه به ۰ نزدیکتر باشد وضوح کمتر می شود. (۱۰۰ وضوح کامل و ۰ نامرئی در نظر گرفته می شود.)
 
از خاصیت opacity برای hover دادن نیز استفاده می شود.
 
 
 
در مثال بالا، در حالت عادی میزان وضوح تصویر ۱ (در مورد ie8 و ماقبل ۱۰۰) و در حالت hover میزان وضوح ۰٫۶ (در مورد ie8 و ما قبل ۶۰) خواهد شد.
 
متن در داخل یک transparent box :
 
شما همچنین می توانید داخل یک فضای transparent متن نیز قرار دهید. برای این منظور به مثال زیر توجه نمایید.
 
 
 
شفاف کردن اشیا و تصاویر در css شفاف کردن اشیا و تصاویر رو در css شفاف کردن اشیا و تصاویر در CSS opacitytext

شفاف کردن اشیا و تصاویر در css

 
در ابتدا ما یک div ایجاد کردیم که فضای داخلی آن را با عکس پوشاندیم و یک کادر نیز دور آن قرار دادیم. سپس div دوم را با کلاس transbox داخل دیو قبلی قرار دادیم که فضای داخلی آن را با رنگ پر کرده و دور آن کادر قرار دادیم و میزان وضوح آن را برابر ۰٫۶ در نظر گرفتیم و در داخل آن نیز متن مورد نظر را با استفاده از تگ p نوشتیم.
 

روش دوم: استفاده از شبه عناصر 

در روش دوم از شبه عناصر کمک میگیریم که شخصاً ترجیح میدهم از روش دوم استفاده کنم. به این صورت که یک div ایجاد میکنیم و به یکی از شبه عناصر :before یا :after اون یک تصویر پس‌زمینه با opacity کمتر از ۱ اختصاص میدهیم.

کدهای HTML به صورت زیر خواهد بود.

 
آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید