Print

Transparan PNG ve CSS Background

27.10.2008 17:58:00
Kategori : Visual Studio ve Araçlar

Özet :
Merhaba bu makalemizde transparan PNG imajlarınızı tekrar eden CSS backgroundlarda hatasız olarak kullanmayı inceleyeceğiz.
Daha önceki Expression Web - Web User Control isimli makalemin sonunda imajlarınızı transparan PNG olarak kullanabilmenin yolunu anlatmıştım.

Bu makaledeki örneğimizi şu şekilde düşünün. Diyelim ki tasarımın altında bir imaj bulunmakta, imajınızın üstünde ise gelen içeriğe göre boyu değişebilecek dinamik bir alan tasarladınız. Altta bunun için hazırladığım bir örnek bulunmakta. Alttaki imaj zamanında hazırladığım bir foto manipülasyon çalışmasıdır. Çalışmaya ve versiyonuna şuradan ulaşabilirsiniz.

Ne güzel yaptınız her şey hazır. O zaman sitemizi oturtalım. 



Tasarımın HTML'i

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Transparan PNG ve CSS Background</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table class="mainTable" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table class="contentTable" align="center" border="0" cellpadding="0" cellspacing="0" style="width: 438px">
<tr>
<td><img alt="" height="11" src="top.png" width="438" /></td>
</tr>
<tr>
<td class="contentBack">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis sit amet turpis. Sed in orci. Vivamus
pulvinar, lacus quis fermentum blandit, mauris ante adipiscing
ligula, quis sollicitudin arcu nibh iaculis metus. Aenean eu
justo et libero eleifend aliquet. Vestibulum at sem.
Pellentesque commodo ligula eget velit. Duis a leo ut lacus
ultrices sodales. Suspendisse elementum. In lectus. Aenean sed
eros sit amet arcu sagittis euismod. Sed varius sapien eu leo.
Fusce consectetuer, lectus quis luctus faucibus, quam orci
consectetuer mi, ut volutpat neque pede nec sem. Maecenas
placerat pharetra erat. Aenean dolor velit, vehicula vel,
pharetra non, viverra ut, diam. Integer quis pede a erat
accumsan dictum. Maecenas magna massa, fringilla quis, ultricies
at, sollicitudin a, turpis. Sed pulvinar lectus ac quam. Sed
aliquet, eros ac convallis tempus, orci nunc bibendum erat, non
laoreet pede purus vel quam. Vestibulum nulla diam, cursus et,
tincidunt a, luctus id, diam. Aliquam malesuada nulla at mi. Nam
varius odio vitae quam. Ut venenatis. Sed elit. Ut magna est,
fermentum in, aliquam non, iaculis quis, mauris. Cras id neque
eget libero pulvinar semper. In hac habitasse platea dictumst.
In hac habitasse platea dictumst. Praesent tincidunt neque sit
amet magna. Nam hendrerit ultrices pede. Etiam sollicitudin.
Donec pretium pellentesque ligula. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque ante. Suspendisse potenti. Sed ultrices, elit sit
amet fermentum viverra, ipsum justo fringilla lacus, at
vestibulum tortor leo in enim. Integer elit. Etiam egestas eros
et enim. Mauris justo. Mauris id nisl ut diam faucibus porttitor.
Maecenas eu augue vel tortor fringilla lacinia. Aliquam tempor
vestibulum erat. Fusce pharetra dapibus massa. Fusce bibendum
dapibus ipsum. Mauris sed tellus sit amet felis fermentum
bibendum. Integer massa. Donec venenatis ante ut tellus. Nunc
vitae massa. Fusce sed leo. Morbi elementum. Pellentesque turpis
elit, porttitor ut, porttitor a, commodo eget, nisl. Vestibulum
tellus elit, vulputate ac, rhoncus porta, facilisis euismod, mi.
Phasellus posuere, justo in blandit convallis, orci odio luctus
est, tempus scelerisque massa dolor eget turpis. In hac
habitasse platea dictumst. Nullam iaculis augue at pede.
Pellentesque vel nisl et nulla accumsan elementum. Morbi eget
libero vitae ipsum tincidunt tincidunt. Aliquam malesuada justo.
Cras blandit iaculis nunc. Curabitur in nunc. Morbi quam.
Vestibulum rhoncus nisi et urna. Integer id libero. Cras vitae
arcu et erat sagittis tempus. Donec pretium. Nam et purus non
risus eleifend malesuada. Etiam felis nulla, eleifend quis,
dignissim eget, scelerisque non, est. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Pellentesque in ipsum. Fusce rutrum felis sit amet
mauris. Pellentesque vitae turpis</td>
</tr>
<tr>
<td><img alt="" height="12" src="bottom.png" width="438" /></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>


Tasarımın CSS'i
body{
background-color:black;
margin:0px;
font-family:Trebuchet MS, Arial, Verdana, sans-serif;
color:black;
font-size:11px;
}
.mainTable{
width:1000px;
background-image:url('back.jpg');
background-repeat:no-repeat;
height:750px;

}
.contentTable{
width:438px;
margin-top:50px;
}
.contentBack{
background-image:url('content_back.png');
background-repeat:repeat-y;
padding:10px 20px 10px 20px;
}

VE ÇIKAN SONUÇLAR;

Alttaki imaj Internet Explorer 7.0, Firefox 2.0 ve Opera 9.0 içindir.



Peki Internet Explorer 6.0 nasıl bir görüntü verir. IE 6.0'ın sonucu altta. Gördüğünüz gibi IE 6.0 transparan PNG konusunda tamamen başarısız. Eğer bir tasarım hazırlıyorsanız IE 6.0'ı yok sayamazsınız. Hala bir çok insan bu versiyonu kullanmaktadır.



Transparan imajları düzeltmek için tasarıma javascript kodumuzu ekliyoruz.


function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

HTML'imizide javascript referans kodumuzu ekliyoruz.

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Böylece üst ve alt transparan PNG imajları IE 6.0'da düzeltmiş olduk.



Ama fark ettiğiniz gibi CSS'den gelen ve tekrar eden background PNG'sinde hala sorun var. Şimdi onu da düzeltilim. O alanı düzenleyen CSS alttaki gibiydi.
.contentBack{
background-image:url('content_back.png');
background-repeat:repeat-y;
padding:10px 20px 10px 20px;
}

Aynı CSS'e şu eklemeyi yapıyoruz.
.contentBack{
background-image:url('content_back.png');
background-repeat:repeat-y;
padding:10px 20px 10px 20px;
behavior: url(iepngfix.htc);
}

Alttaki kodu olduğu kopyalayıp iepngfix.htc olarak CSS'siniz ile aynı klasöre kopyalarsanız artık IE 6.0'da da tasarımınız düzgün çalışacaktır.


<public:component>
<public:attach event="onpropertychange" onevent="iePNGFix(0)" />

<script type="text/javascript">

if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';



function filt(s, b)
{
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
var sM = (currentStyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');

if (s && !(/IMG|INPUT/.test(nodeName) && !b) &&
currentStyle.width == 'auto' && currentStyle.height == 'auto')
{
style.width = offsetWidth + 'px';
style.height = clientHeight + 'px';
if (currentStyle.display == 'inline') style.display = 'inline-block';
}

if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="' + sM + '")';
}

function iePNGFix(init)
{
if (!/MSIE (5\.5|6)/.test(navigator.userAgent) || typeof filters == 'unknown') return;
var evt = init ? { propertyName: 'src,background' } : event;
var isSrc = /src/.test(evt.propertyName);
var isBg = /background/.test(evt.propertyName);
var isClass = !init &&
((this.className != this._png_class) && (this.className || this._png_class));
if (!(isSrc || isBg || isClass)) return;
this._png_class = this.className;
var blank = blankImg.match(/([^\/]+)$/)[1];

// Required for Whatever:hover support - erase any set BG if className changes.
if (isClass && ((style.backgroundImage.indexOf('url(') == -1) ||
(style.backgroundImage.indexOf(blank) > -1)))
{
setTimeout(function() { this.style.backgroundImage = '' }, 0);
return;
}

if (isSrc && this.src && /IMG|INPUT/.test(nodeName))
{
if ((/\.png/i).test(src))
{
filt(src, 1);
src = blankImg;
}
else if (src.indexOf(blank) == -1) filt();
}

var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
if ((bgSrc + this.src).indexOf(blank) == -1)
{
var bgPNG = bgSrc.match(/^url[("']+(.*\.png[^\)"']*)[\)"']+[^\)]*$/i);

if (bgPNG)
{
style.backgroundImage = 'url("' + blankImg + '")';
filt(bgPNG[1], 0);
// Unclickable elements inside PNG backgrounds.
var tags = ['a', 'input', 'select', 'textarea', 'iframe', 'object'],
t = tags.length, tFix = [];
while (t--)
{
var elms = all.tags(tags[t]), e = elms.length;
while (e--) tFix.push(elms[e]);
}
var t = tFix.length;
if (t && (/relative|absolute/i).test(currentStyle.position))
alert('IEPNGFix: Children of positioned element are unclickable:\n\n<' +
nodeName + (id && ' id=' + id) + '>');
while (t--)
if (!(/relative|absolute/i).test(tFix[t].currentStyle.position))
tFix[t].style.position = 'relative';
}
else filt();
}
}

iePNGFix(1);

</script>
</public:component>


Veee IE 6.0 için yeni görüntü.



Not: Javascript'i ve HTC'yi hazırlayan arkadaşlara teşekkür ederim.

Bu makalede web tasarımcısının baş belası olabilecek transparan PNG'yi CSS ile kullanmanın yolunu inceledik.

İyi çalışmalar

Teşekkürler.
Erbuğ Kaya
www.erbugkaya.com

Yazgelistir.com