• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ایجاد تصویر Transparent در CSS
#1
سلام دوستان،

امروز قصد دارم در مورد ناپیدا کردن (Transparent) یک تصویر صحبت کنم. حتما تو فتوشاپ دیدید که میشه opacity تصویر رو کم کرد! درسته؟
خوب از این امکانی که فتوشاپ برخوردار هست، CSS هم برخورداره. پس در ادامه به نحوه ساخت این نوع تصویر و توضیحات اضافش میپردازیم.

به کد زیر دقت کنید:

کد پی‌اچ‌پی:
<img src="alexm.jpg" width="150" height="113" alt="Alex michael! it's me"
style="opacity:0.4;filter:alpha(opacity=40)" /> 

در مورد صفت style توضیحی نمی دم چون حتما می دونید که بور دستی و مستقیم میشه ازش استفاده کرد در همه مواقع. چیزی که جلب توجه می کنه، اون مقادیری هست که درون دابل کوت قرار گرفته. نمی دونم براتون سوال پیش اومده یا نه اما حتما پیش اومده که اینقدر دارید فکر می کنید Big Grin - آره درسته! چرا ما از دو نوع opacity استفاده کردیم؟ هان؟ چرا؟
همونطور که می دونید ساختار مرورگر ها مثلا فایرفاکس با IE با هم فرق دارند! پس برای اینکه طرحی کامل بزنیم مجبوریم که برای هر مرورگر رو جدا بنویسیم. اما حالا کدوم واسه کدومه؟ چرا اینقدر عجله داری؟ صبر کن می گم بهت. دندون رو جیگر بزار Big Grin .
در فایرفاکس از opacity:x استفاده میشه که مقادیری که به opacity میدیم، از 0.0 شروع میشه تا 1.0 ! این رو خوب بخاطر بسپارید ها!
در IE هم از filter:alpha(opacity=x) استفاده می کنیم و مقادیری که بهش می تونیم بدیم، از 0 هست تا 100.

دقت کنید که در هر دو مرورگر و هر دو خواص، هرچه مقدار کمتری بدیم، transparenty ما بیشتر میشه! مثلا مقدار ترنس پرنت 0.2 از 1.0 خیلی بیشتر هست!

امیدوارم جالب بوده باشه Angel
غایب
  پاسخ
تشکر شده توسط : Y.P.Y Maya oia amir.s Alimokhlesi


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان