Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

weslleysolo

Fundo transparente de imagem

Por , em Desenvolvimento frontend

Recommended Posts

weslleysolo    0

weslleysolo
Postado

Avaliem as seguintes imagens:

 

Imagem Postada

 

Imagem Postada

 

 

Como podem ver, é um pedacinho de uma logo, eu a esportei no formato png com fundo tranparente mas no IE6 aparece esse "cinza" (figura 1)

 

como resolver,

 

Ps...se estiver perguntando no lugar errado, perdoem-me!

 

valeu,.

Compartilhar este post

Link para o post
Compartilhar em outros sites

weslleysolo    0

weslleysolo
Postado

Ô meu Deus do céu viu... Uma pesquisada antes ajudaria, né?Mas já que não pesquisou, tá aqui um material: BOA DICA: PNG com transparencia no IEBoa sorte

ta nervoso!?....vai pescar.Mas ja q teve a benevolência de responder agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Weslleysolo não leve a mal o nosso amigo Paulo, mas realmente existem dúvidas muito comuns que o pessoal posta repetidamente aqui...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

weslleysolo    0

weslleysolo
Postado

Entendo INSIDE, acontence é que nem sempre um pergunta/topico ja feito é o suficiente para solucionar um problema...exemplo, o link q ele me passou, a solucao imposta lá nao resolveu minha situação....Mas agradeço, nem tem como negar q aqui nossos problemas (grande maioria) tem solucao.Explicando... Fiz um topico na secao Photoshop & ImageReady mas na hora de grava-lo deu um pau aqui me pareceu que nao tinha registrado entao vim aqui e refiz...Desculpem pelo topico Multi.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Conceito Criativo    0

Conceito Criativo
Postado

Entendo INSIDE, acontence é que nem sempre um pergunta/topico ja feito é o suficiente para solucionar um problema...exemplo, o link q ele me passou, a solucao imposta lá nao resolveu minha situação....Mas agradeço, nem tem como negar q aqui nossos problemas (grande maioria) tem solucao.Explicando... Fiz um topico na secao Photoshop & ImageReady mas na hora de grava-lo deu um pau aqui me pareceu que nao tinha registrado entao vim aqui e refiz...Desculpem pelo topico Multi.

Eu resolví meus problemas criando duas Css. Uma para ie7 e firefox, e outra para ie anteriores ao ie7.a primeira chamei de css.css mesmoa segunda, para os ies anteriores ao ie7, chamei de cssieold.ccsE neguei a leitura da cssieold para o ie7. Resolví meus problemas conseguí rodar bem com todos os 3 browsers.O código na página ficou asism:
<link href="css.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]><LINK href="cssieold.css" type=text/css rel=stylesheet> <![endif]-->
Para a transparência de PNG funcionar corretamente em versões antigas do ie, coloque este chamado dentro do head:
<!--[if lt IE 7.]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->
e crie um arquivo chamado pngfix.js com o seguinte conteúdo:
/* Correctly handle PNG transparency in Win IE 5.5 & 6.[url=http://homepage.ntlworld.com/bobosola]http://homepage.ntlworld.com/bobosola[/url]. Updated 18-Jan-2006.Use in <HEAD> with DEFER keyword wrapped in conditional comments:<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->*/var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters)) {   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	  }   }}

Compartilhar este post

Link para o post
Compartilhar em outros sites

weslleysolo    0

weslleysolo
Postado

Ok...vou testar.O ruim disso é q você tem que ficar criando esses recursos alternativos, que no final podem virar gambiarras!!! mas valeu a dica e vou testar.:)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Evite o PNG transparente. Use-o como uma última alternativa mesmo, só em caso de vida ou morte.[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

http://www.wnddesigner.com/teste/pagina.html

 

Acessem ae e vejam... A dica do Paulo e do outro brother, funcionam mas "corta" o link.

 

INSIDE, vou seguir sua dica e evitarei fazer issu...mas quero só resolver esse exemplo p/ me sentir "missao cumprida"

O que você quer dizer extamente com "corta" o link?

 

Bom, de qualquer modo, fiz um teste aqui no meu IE6, da seguinte forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>Teste PNG</title>		<style type="text/css">		#umA {			width: 300px;			height: 300px;			border: 1px solid #333;			background: url(tit.jpg) repeat;		}		#umB {			float: left;			width: 120px;			height: 120px;			background: url(tit3.png) repeat;		}		a {			display: block;			widht: 100px;			background-color: #ffc;		}		</style>		<!--[if IE]>			<style>			#umB {				background-image: none;				filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tit3.png,sizingMethod='scale');			}			</style>		<![endif]-->	</head>	<body>		<div id="umA">			<div id="umB"><a href="#">BACKGROUND.</a></div>		</div>	</body></html>
Ou, se preferir, visualize o exemplo on-line.

 

Um abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito