Transparent PNG pada Background


Pernah suatu hari saya dipusingkan dengan masalah harus mentransparentkan suatu background pada website. Hal yang termudah adalah dengan menggunakan image dengan suport transparent yaitu gif atau PNG. Gif harus membayar sedangkan PNG sifatnya free dengan kemampuan suport transparent, jadi pasti saya pilih PNG. Tapi masalah muncul kemudian lagi-lagi gara-gara IE yang tidak suport transparent, akhirnya saya temukan solusinya.Berikut langkah-langkanya:

1. Pada tag setelah head atau setelah style tuliskan tag-tag berikut:

<!--&#91;if IE&#93;>
<style type="text/css">
@import url(iepngfix.css);
</style>
<!&#91;endif&#93;-->

2. Kemudian bikin style css dengan nama iepngfix.css, nama ini dan peletakkan terserah pada keinginan anda. Berikut script pada style-nya:

/* CSS Document */
img,div { behavior: url(iepngfix.htc);}
<pre>

3. Untukisi dari file iepngfix.htc berikut ini:

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That’s all the configuration you need.
if (typeof blankImg == ‘undefined’) var blankImg = ‘http://www.ayushsaran.com/blank.gif&#8217;;

var f = ‘DXImageTransform.Microsoft.AlphaImageLoader’;

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = ‘progid:’+f+'(src=”‘+s+'”,sizingMethod=”‘+m+'”)’;
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == ‘IMG’)
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == ‘auto’ && currentStyle.height == ‘auto’)
style.width = offsetWidth + ‘px’;
filt(src, ‘scale’);
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt(); } else if (bgImg && bgImg != 'none') { if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i)) { var s = RegExp.$1; if (currentStyle.width == 'auto' && currentStyle.height == 'auto') style.width = offsetWidth + 'px'; style.backgroundImage = 'none'; filt(s, 'crop'); // IE link fix. for (var n = 0; n < childNodes.length; n++) if (childNodes[n].style) childNodes[n].style.position = 'relative'; } else filt(); } } doFix(); [/sourcecode] Hal diatas akan menyelesaikan masalah anda yang tidak bisa mentransparentkan background image pada element div.

Posted on November 30, 2008, in CSS and tagged , , , . Bookmark the permalink. 4 Komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: