یه مشکل تکراری با filter:alpha(opacity

AlioilA · Jan 6, 2010

سلام...

توی این کد :

<head>
<style>
.container {
background-color: #ffffff; /* the background */
filter:alpha(opacity=50); /* Internet Explorer */
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer Mozilla and CSS-3 */
}

</style>

<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>

</head>

<body>
<table width="100%" border="0" cellspacing="0" onMouseOver="javascript:showDiv()" onMouseOut="javascript:hideDiv()" style="background: url(http://img.parsi-soft.net/out.php/i6809_bbflash1.jpg; height:150">
<tr>
<th scope="col" height="20"> </th>
</tr>
<tr>
<td id="hideshow" class="container" style="visibility:hidden; background-color:#FFF">My content</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table>

</body>

وقتی برای قسمت بک گراند opacity قرار می دم .. تمام نوشته های توش هم ( قسمت My content ) این خاصیت رو می گیرن ..
من می خوام یک بک گراندtransparent داشته باشم که نوشته های توش transparent نباشن !!!

می دونم که این مشکل تکراریه منم قبلا" توی همین فروم دیده بودم که کسی این سوال رو پرسیده بود اما نتونستم پیداش کنم...

AlioilA · Jan 6, 2010

nasser_ray · Jan 8, 2010

سلام
بهتر برای پس زمینه از یک فایل PNG-24 استفاده کنید.
1. با فتوشاپ یا هر ادیتور دیگه ای یک فایل 1 در 1 پیکسی درست کنید و به میزان لازم (مثلا همان 50 درصد) Opacity روش اعمال کنید (فایل رو با فورمت PNG-24 ذخیره کنید)
2. فایل فوق رو در پس زمینه محل مورد نظر لود کنید

echessdesign · Jan 9, 2010

درود بر شما
خصیصه transparent جزو خصیصه هایی هست که Div فرزند از مادر به ارث می برد.
راه شما این است که شما DIV دیگری را با خصیصه های position:absolute و تعیین موقعیت، بر روی DIV که transparent a شده است قرار دهید.
پاینده باشید

AlioilA · Jan 23, 2010

ممنون از دوستان ..
اما در مورد پیشنهاد اول باید بگم که اگر اشتباه نکنم png با alpha channel روی همه ی مرور گر ها بدرستی نمایش داده نمی شه !
در مورد پیشنهاد دوم هم فکر میکنم اون position absolute توی مرورگر opera جاش با مرورگر مثلا IE فرق بکنه !!
درسته ؟

pouya saadeghi · Jan 23, 2010

بله... Png-24 شفاف با ie‏ مشكل داره.
ولي براي من هم جاي سواله كه چجوري بعضي سايت ها اين مشكل رو حل ميكنن!‏؟
مثلا همين هدر مجيد آنلاين چجوري ترانسپرنت داره ولي با ie‏ مشكل نداره‏؟؟

echessdesign · Jan 23, 2010

درود بر شما

بله... Png-24 شفاف با ie‏ مشكل داره.

برای حل این مشکل، از این کد جاوا اسکریپت استفاده کنید.
توجه داشته باشید که عکس png که در پس زمینه قرار گیرد، در ie6 لود نمی شود

HTML:

var clear="images/clear.gif"; //path to clear.gif

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');var ct=document.getElementById("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}}