سلام
من یک جدول دارم که opacity اون کمتر از صده حالا عکس و مطلب که توی اون میزارم میخوام که صد باشه ولی عکس هارو با همون opacity پایین نشون میده ولی من فقط میخوام که background کم باشه مثل منوی بالای همین سایت
به طور کلی و معمول دو راه کلی برای استفاده از ترنسپرنت کردن وجود داره:
1-استفاده از عکس های png که ترنسپرنت هستند(که در مواردی که نیاز داریم قسمت بزرگی ترنسپنت باشه اصلا قابل توجیه نیست!)
2-استفاده از خاصیت opacity در css که مشکلی که داره رو خودتون بهش اشاره کردین.
تا اونجایی که من قبلا دنبالش گشتم متوجه شدم که این مشکل تنها و تنها یک راه داره و اون اینه که چیزی رو درون اون div یا ... ای که ترنسپرنت هست قرار ندیم.یعنی چی؟
یعنی اینکه مثلا اگر یه عکس داریم که نمیخایم ترنسپرنسی رو به ارث ببره باید اون رو به صورت absolute و خارج از اون div روی اون قرار بدیم(اگر اصرار بر این راه دارین بگین که کامل مثال بزنم ازش)
البته تا اونجایی که من توی همین سایت دیدم منوی بالای سایت هم همین مشکل رو داره یعنی نوشته ها و دکمه های جستجو هم ترنسپرنت شدن (که البته در مورد نوشته ها زیاد معلوم نیست)
اما راهی که من توی یک سایت خارجی پیدا کردم.و بنظرم راه خوبیه:
استفاده از نوع رنگ RGBa:
به کد زیر دقت کنید:
HTML:
<div class="transparent"><img /></div>
[CSSS]
div.transparent{
width:500px;
height:500px;
/*browsers that dont support rgba*/
background:rgb(0,0,0);
/*browsers that support rgba*/
background:rgba(0,0,0,0.6);
/*IE*/
filterrogidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/*IE8*/
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
[/CSSS]
خوب حالا توضیحات :
اون a آخر در rgba همون alpha هست یعنی کانالی که از اون برای کم کردن iopacity استفاده می کنیم.
که در اینجا ما این مقدار رو 0.6 قرار دادیم.
نکته اصلی دو خط آخر استایل هست.که برای مرورگر IE نوشته شده.به این صورت هست که یک کد هگزادسیمال با 8 رقم قرار داره اون دو رقم اول همون آلفای ما و بقیه هم رنگ ماست.
حالا اون دو رقم اینجا چه جوری باید پیدا کنیم؟
راه حل اینه که مثلا برای 0.6 توی گوگل سرچ کنیم "0.6*255 in hex" که در اینجا عدد 99 رو به ما میده که این دو رقم رو در اول کد هشت رقمی قرار میدیم.
امیدوارم مورد استفاده بوده باشه
هر سوالی بود من در خدمتم
rogid
