{"id":698,"date":"2010-06-28T10:55:25","date_gmt":"2010-06-28T10:55:25","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=698"},"modified":"2014-01-16T23:30:29","modified_gmt":"2014-01-16T23:30:29","slug":"transparan-png-ve-css-background","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=698","title":{"rendered":"Transparan PNG ve CSS Background"},"content":{"rendered":"

27\/10\/2008
\nMerhaba bu makalemizde transparan PNG imajlar\u0131n\u0131z\u0131 tekrar eden CSS backgroundlarda hatas\u0131z olarak kullanmay\u0131 inceleyece\u011fiz.<\/p>\n


\nDaha \u00f6nceki Expression Web – Web User Control isimli makalemin sonunda imajlar\u0131n\u0131z\u0131 transparan PNG olarak kullanabilmenin yolunu anlatm\u0131\u015ft\u0131m.<\/p>\n

Bu makaledeki \u00f6rne\u011fimizi \u015fu \u015fekilde d\u00fc\u015f\u00fcn\u00fcn. Diyelim ki tasar\u0131m\u0131n alt\u0131nda bir imaj bulunmakta, imaj\u0131n\u0131z\u0131n \u00fcst\u00fcnde ise gelen i\u00e7eri\u011fe g\u00f6re boyu de\u011fi\u015febilecek dinamik bir alan tasarlad\u0131n\u0131z. Altta bunun i\u00e7in haz\u0131rlad\u0131\u011f\u0131m bir \u00f6rnek bulunmakta. Alttaki imaj zaman\u0131nda haz\u0131rlad\u0131\u011f\u0131m bir foto manip\u00fclasyon \u00e7al\u0131\u015fmas\u0131d\u0131r.<\/p>\n

Ne g\u00fczel yapt\u0131n\u0131z her \u015fey haz\u0131r. O zaman sitemizi oturtal\u0131m.<\/p>\n

\"\"<\/a><\/p>\n

Tasar\u0131m\u0131n HTML’i<\/p>\n

<!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”>
\n<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”><head>
\n<meta content=”text\/html; charset=utf-8″ http-equiv=”Content-Type” \/>
\n<title>Transparan PNG ve CSS Background<\/title>
\n<link href=”main.css” rel=”stylesheet” type=”text\/css” \/>
\n<\/head><\/p>\n

<body><\/p>\n

<table align=”center” border=”0″ cellpadding=”0″ cellspacing=”0″>
\n<tr>
\n<td valign=”top”>
\n<table align=”center” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 438px”>
\n<tr>
\n<td><img alt=”” height=”11″ src=”top.png” width=”438″ \/><\/td>
\n<\/tr>
\n<tr>
\n<td>Lorem ipsum dolor sit amet, consectetuer
\nadipiscing elit. Duis sit amet turpis. Sed in orci. Vivamus
\npulvinar, lacus quis fermentum blandit, mauris ante adipiscing
\nligula, quis sollicitudin arcu nibh iaculis metus. Aenean eu
\njusto et libero eleifend aliquet. Vestibulum at sem.
\nPellentesque commodo ligula eget velit. Duis a leo ut lacus
\nultrices sodales. Suspendisse elementum. In lectus. Aenean sed
\neros sit amet arcu sagittis euismod. Sed varius sapien eu leo.
\nFusce consectetuer, lectus quis luctus faucibus, quam orci
\nconsectetuer mi, ut volutpat neque pede nec sem. Maecenas
\nplacerat pharetra erat. Aenean dolor velit, vehicula vel,
\npharetra non, viverra ut, diam. Integer quis pede a erat
\naccumsan dictum. Maecenas magna massa, fringilla quis, ultricies
\nat, sollicitudin a, turpis. Sed pulvinar lectus ac quam. Sed
\naliquet, eros ac convallis tempus, orci nunc bibendum erat, non
\nlaoreet pede purus vel quam. Vestibulum nulla diam, cursus et,
\ntincidunt a, luctus id, diam. Aliquam malesuada nulla at mi. Nam
\nvarius odio vitae quam. Ut venenatis. Sed elit. Ut magna est,
\nfermentum in, aliquam non, iaculis quis, mauris. Cras id neque
\neget libero pulvinar semper. In hac habitasse platea dictumst.
\nIn hac habitasse platea dictumst. Praesent tincidunt neque sit
\namet magna. Nam hendrerit ultrices pede. Etiam sollicitudin.
\nDonec pretium pellentesque ligula. Cum sociis natoque penatibus
\net magnis dis parturient montes, nascetur ridiculus mus.
\nPellentesque ante. Suspendisse potenti. Sed ultrices, elit sit
\namet fermentum viverra, ipsum justo fringilla lacus, at
\nvestibulum tortor leo in enim. Integer elit. Etiam egestas eros
\net enim. Mauris justo. Mauris id nisl ut diam faucibus porttitor.
\nMaecenas eu augue vel tortor fringilla lacinia. Aliquam tempor
\nvestibulum erat. Fusce pharetra dapibus massa. Fusce bibendum
\ndapibus ipsum. Mauris sed tellus sit amet felis fermentum
\nbibendum. Integer massa. Donec venenatis ante ut tellus. Nunc
\nvitae massa. Fusce sed leo. Morbi elementum. Pellentesque turpis
\nelit, porttitor ut, porttitor a, commodo eget, nisl. Vestibulum
\ntellus elit, vulputate ac, rhoncus porta, facilisis euismod, mi.
\nPhasellus posuere, justo in blandit convallis, orci odio luctus
\nest, tempus scelerisque massa dolor eget turpis. In hac
\nhabitasse platea dictumst. Nullam iaculis augue at pede.
\nPellentesque vel nisl et nulla accumsan elementum. Morbi eget
\nlibero vitae ipsum tincidunt tincidunt. Aliquam malesuada justo.
\nCras blandit iaculis nunc. Curabitur in nunc. Morbi quam.
\nVestibulum rhoncus nisi et urna. Integer id libero. Cras vitae
\narcu et erat sagittis tempus. Donec pretium. Nam et purus non
\nrisus eleifend malesuada. Etiam felis nulla, eleifend quis,
\ndignissim eget, scelerisque non, est. Class aptent taciti
\nsociosqu ad litora torquent per conubia nostra, per inceptos
\nhimenaeos. Pellentesque in ipsum. Fusce rutrum felis sit amet
\nmauris. Pellentesque vitae turpis<\/td>
\n<\/tr>
\n<tr>
\n<td><img alt=”” height=”12″ src=”bottom.png” width=”438″ \/><\/td>
\n<\/tr>
\n<\/table>
\n<\/td>
\n<\/tr>
\n<\/table><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n<\/div>\n

Tasar\u0131m\u0131n CSS’i<\/p>\n

body{
\nbackground-color:black;
\nmargin:0px;
\nfont-family:Trebuchet MS, Arial, Verdana, sans-serif;
\ncolor:black;
\nfont-size:11px;
\n}
\n.mainTable{
\nwidth:1000px;
\nbackground-image:url(‘back.jpg’);
\nbackground-repeat:no-repeat;
\nheight:750px;}
\n.contentTable{
\nwidth:438px;
\nmargin-top:50px;
\n}
\n.contentBack{
\nbackground-image:url(‘content_back.png’);
\nbackground-repeat:repeat-y;
\npadding:10px 20px 10px 20px;
\n}<\/p>\n<\/div>\n

VE \u00c7IKAN SONU\u00c7LAR;<\/p>\n

Alttaki imaj Internet Explorer 7.0, Firefox 2.0 ve Opera 9.0 i\u00e7indir.<\/p>\n

\"\"<\/a><\/p>\n

Peki Internet Explorer 6.0 nas\u0131l bir g\u00f6r\u00fcnt\u00fc verir. IE 6.0’\u0131n sonucu altta. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi IE 6.0 transparan PNG konusunda tamamen ba\u015far\u0131s\u0131z. E\u011fer bir tasar\u0131m haz\u0131rl\u0131yorsan\u0131z IE 6.0’\u0131 yok sayamazs\u0131n\u0131z. Hala bir \u00e7ok insan bu versiyonu kullanmaktad\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

Transparan imajlar\u0131 d\u00fczeltmek i\u00e7in tasar\u0131ma javascript kodumuzu ekliyoruz.<\/p>\n

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

HTML’imizide javascript referans kodumuzu ekliyoruz.<\/p>\n

<!–[if lt IE 7]>
\n<script defer type=”text\/javascript” src=”pngfix.js”><\/script>
\n<![endif]–><\/div>\n

B\u00f6ylece \u00fcst ve alt transparan PNG imajlar\u0131 IE 6.0’da d\u00fczeltmi\u015f olduk.<\/p>\n

\"\"<\/a><\/p>\n

Ama fark etti\u011finiz gibi CSS’den gelen ve tekrar eden background PNG’sinde hala sorun var. \u015eimdi onu da d\u00fczeltilim. O alan\u0131 d\u00fczenleyen CSS alttaki gibiydi.<\/p>\n

.contentBack{
\nbackground-image:url(‘content_back.png’);
\nbackground-repeat:repeat-y;
\npadding:10px 20px 10px 20px;
\n}<\/div>\n

Ayn\u0131 CSS’e \u015fu eklemeyi yap\u0131yoruz.<\/p>\n

.contentBack{
\nbackground-image:url(‘content_back.png’);
\nbackground-repeat:repeat-y;
\npadding:10px 20px 10px 20px;
\nbehavior: url(iepngfix.htc);
\n}<\/div>\n

Alttaki kodu oldu\u011fu kopyalay\u0131p iepngfix.htc<\/strong> olarak CSS’siniz ile ayn\u0131 klas\u00f6re kopyalarsan\u0131z art\u0131k IE 6.0’da da tasar\u0131m\u0131n\u0131z d\u00fczg\u00fcn \u00e7al\u0131\u015facakt\u0131r.<\/p>\n

<public:component>
\n<public:attach event=”onpropertychange” onevent=”iePNGFix(0)” \/><script type=”text\/javascript”><\/p>\n

if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;<\/p>\n

function filt(s, b)
\n{
\nvar f = ‘DXImageTransform.Microsoft.AlphaImageLoader’;
\nvar sM = (currentStyle.backgroundRepeat == ‘no-repeat’) ? ‘crop’ : ‘scale’;
\ns = (s || ”).replace(\/\\(\/g, ‘%28’).replace(\/\\)\/g, ‘%29’);<\/p>\n

if (s && !(\/IMG|INPUT\/.test(nodeName) && !b) &&
\ncurrentStyle.width == ‘auto’ && currentStyle.height == ‘auto’)
\n{
\nstyle.width = offsetWidth + ‘px’;
\nstyle.height = clientHeight + ‘px’;
\nif (currentStyle.display == ‘inline’) style.display = ‘inline-block’;
\n}<\/p>\n

if (filters[f])
\n{
\nfilters[f].enabled = s ? true : false;
\nif (s) with (filters[f]) { src = s }
\n}
\nelse if (s) style.filter = ‘progid:’+f+'(src=”‘+s+'”,sizingMethod=”‘ + sM + ‘”)’;
\n}<\/p>\n

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

\/\/ Required for Whatever:hover support – erase any set BG if className changes.
\nif (isClass && ((style.backgroundImage.indexOf(‘url(‘) == -1) ||
\n(style.backgroundImage.indexOf(blank) > -1)))
\n{
\nsetTimeout(function() { this.style.backgroundImage = ” }, 0);
\nreturn;
\n}<\/p>\n

if (isSrc && this.src && \/IMG|INPUT\/.test(nodeName))
\n{
\nif ((\/\\.png\/i).test(src))
\n{
\nfilt(src, 1);
\nsrc = blankImg;
\n}
\nelse if (src.indexOf(blank) == -1) filt();
\n}<\/p>\n

var bgSrc = currentStyle.backgroundImage || style.backgroundImage;
\nif ((bgSrc + this.src).indexOf(blank) == -1)
\n{
\nvar bgPNG = bgSrc.match(\/^url[(“‘]+(.*\\.png[^\\)”‘]*)[\\)”‘]+[^\\)]*$\/i);<\/p>\n

if (bgPNG)
\n{
\nstyle.backgroundImage = ‘url(“‘ + blankImg + ‘”)’;
\nfilt(bgPNG[1], 0);
\n\/\/ Unclickable elements inside PNG backgrounds.
\nvar tags = [‘a’, ‘input’, ‘select’, ‘textarea’, ‘iframe’, ‘object’],
\nt = tags.length, tFix = [];
\nwhile (t–)
\n{
\nvar elms = all.tags(tags[t]), e = elms.length;
\nwhile (e–) tFix.push(elms[e]);
\n}
\nvar t = tFix.length;
\nif (t && (\/relative|absolute\/i).test(currentStyle.position))
\nalert(‘IEPNGFix: Children of positioned element are unclickable:\\n\\n<‘ +
\nnodeName + (id && ‘ id=’ + id) + ‘>’);
\nwhile (t–)
\nif (!(\/relative|absolute\/i).test(tFix[t].currentStyle.position))
\ntFix[t].style.position = ‘relative’;
\n}
\nelse filt();
\n}
\n}<\/p>\n

iePNGFix(1);<\/p>\n

<\/script>
\n<\/public:component><\/p>\n<\/div>\n

Veee IE 6.0 i\u00e7in yeni g\u00f6r\u00fcnt\u00fc.<\/p>\n

\"\"<\/a><\/p>\n

Not: Javascript’i ve HTC’yi haz\u0131rlayan arkada\u015flara te\u015fekk\u00fcr ederim.<\/p>\n

Bu makalede web tasar\u0131mc\u0131s\u0131n\u0131n ba\u015f belas\u0131 olabilecek transparan PNG’yi CSS ile kullanman\u0131n yolunu inceledik.<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n

Te\u015fekk\u00fcrler.<\/p>\n","protected":false},"excerpt":{"rendered":"

27\/10\/2008 Merhaba bu makalemizde transparan PNG imajlar\u0131n\u0131z\u0131 tekrar eden CSS backgroundlarda hatas\u0131z olarak kullanmay\u0131 inceleyece\u011fiz.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[42],"class_list":["post-698","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-css"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=698"}],"version-history":[{"count":7,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/698\/revisions"}],"predecessor-version":[{"id":2480,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/698\/revisions\/2480"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}