حتما میدانید که اگر در صفحات سایت خود از تصویری با فرمت PNG و بدون پس زمینه استفاده نمایید در Internet Explorer 5.5 , 6 تصویر PNG شما مانند تصویر سمت راست ( در تصویر بالا ) به نمایش در میآید.
درست است که تعداد محدودی از افراد از Internet Explorer 5.5 , 6 استفاده میکنند ولی بهتر است سایت شما با تمام مرورگرها سازگار باشد و به درستی نمایش داده شود.
روشهای مختلفی برای حل این مشکل وجود دارد که به برخی از آنها اشاره میکنم.
- حل مشکل با استفاده از HTML :
<span style="display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='yourpngphoto.png');"> <img src="yourpngphoto.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"/> </span>
(src='yourpngphoto.png');"> <img src="yourpngphoto.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"/> </span>
توجه: در کد بالا بهجای عبارت yourpngphoto.png آدرس تصویر PNG خود را قرار دهید.
- حل مشکل با استفاده از CSS و کدهای شرطی :
یک صفحه به نام styles.css بسازید و کدهای زیر را در آن قرار دهید:
.png {
width: 500px;
height: 176px;
background: url(yourpngphoto.png) no-repeat;
}
width: 500px;
height: 176px;
background: url(yourpngphoto.png) no-repeat;
}
توجه: در کد بالا بهجای عبارت yourpngphoto.png آدرس تصویر PNG خود و در مقابل width و height طول و عرض صفحه خود را قرار دهید.
سپس صفحه CSS دوم را با نام stylespng.css بسازید و کدهای زیر را در آن قرار دهید:
html .png {
background: none;
width: 500px;
height: 176px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
background: none;
width: 500px;
height: 176px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
توجه: در کد بالا بهجای عبارت yourpngphoto.png آدرس تصویر PNG خود و در مقابل width و height طول و عرض صفحه خود را قرار دهید.
سپس در صفحه مورد نظر کدهای زیر را در بخش <head> صفحه قرار دهید.
<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="stylespng.css" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="stylespng.css" type="text/css" />
<![endif]-->
و در جایی که میخواهید تصویر نمایش داده شود کد زیر را قرار دهید:
<div class="png"></div>
- حل مشکل با استفاده از jQuery :
