Publicado em 21 de mai.

Fundo Transparente - Google Site

Olá,

eu utilizo a plataforma do google site para desenvolver minha página.

Estou com uma dúvida: fiz um menu nos termos do código abaixo, utilizando imagem PNG, com fundo transparente. Entretanto, o fundo que aparece na página fica branco. Como fazer para o fundo ficar transparente? Que alteração devo fazer nesse código?

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

 <ModulePrefs title="Botoes" />

 <Content type="html">

 <![CDATA[

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<style type="text/css">

body {margin:0; padding:0; text-align:center;}

a {display:inline-block; margin-right:3px; outline:none;}

a:hover img, a:focus img {visibility:hidden;}

img {border:0;}

#home {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/home2.png);}

#abanda {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/abanda2.png);}

#musicas {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/musicas2.png);}

#fotos {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/fotos2.png);}

#videos {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/videos2.png);}

#espacodofa {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/espacodofa2.png);}

#tribosnamidia {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/tribosnamidia2.png);}

#agenda {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/agenda2.png);}

#contrate {background-image:url(https://sites.google.com/a/tribosdejaco.com/tribosdejaco/contrate2.png);}

</style>

<base target="_parent">

<a id="home" href="[http://www.tribosdejaco.com/home](http://www.tribosdejaco.com/home)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/home1.png"></a>

<a id="abanda" href="[http://www.tribosdejaco.com/abanda](http://www.tribosdejaco.com/abanda)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/abanda1.png"></a>

<a id="musicas" href="[http://www.tribosdejaco.com/musicas](http://www.tribosdejaco.com/musicas)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/musicas1.png"></a>

<a id="fotos" href="[http://www.tribosdejaco.com/fotos](http://www.tribosdejaco.com/fotos)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/fotos1.png"></a>

<a id="videos" href="[http://www.tribosdejaco.com/videos](http://www.tribosdejaco.com/videos)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/videos1.png"></a>

<a id="espacodofa" href="[http://www.tribosdejaco.com/espacodofa](http://www.tribosdejaco.com/espacodofa)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/espacodofa1.png"></a>

<a id="tribosnamidia" href="[http://www.tribosdejaco.com/tribosnamidia](http://www.tribosdejaco.com/tribosnamidia)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/tribosnamidia1.png"></a>

<a id="agenda" href="[http://www.tribosdejaco.com/agenda](http://www.tribosdejaco.com/agenda)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/agenda1.png"></a>

<a id="contrate" href="[http://www.tribosdejaco.com/contrate](http://www.tribosdejaco.com/contrate)"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/contrate1.png"></a>

 ]]>

 </Content>

</Module>

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

jerfeson· 27 de mai.

Retire a imagem use rgb para deixar o fundo com transparência vc pode usar também transparência a loja

Background-color=rgb"xxx xxx xxx 0.1 a 1.0" os três primeiros paramentos define as cores o último que pode ser de 0.1 a 1.0 define a transparência verifique a sintaxe

reebr· 27 de mai.

Só fica branco quando há o evento hover, e isto é causado por essa regra:

a:hover img, a:focus img {visibility:hidden;}

Retire a imagem use rgb para deixar o fundo com transparência você pode usar também transparência a loja

Background-color=rgb"xxx xxx xxx 0.1 a 1.0" os três primeiros paramentos define as cores o último que pode ser de 0.1 a 1.0 define a transparência verifique a sintaxe

background: rgb(255,255,255);

background: rgb**a**(255,255,255,**0.6**);

lucasmilet· 27 de mai.

Desculpe, sou leigo no assunto.

Devo retirar esta regra: a:hover img, a:focus img {visibility:hidden;}

E colocar no lugar esta regra: background: rgba(255,255,255,0.6)

Grato, desde já.

reebr· 28 de mai.

Não, eu apenas fiz uma correção no comentário do jerfeson sobre a cor de fundo. RGB é diferente de RGBA:

http://jsfiddle.net/rnxn/5ZLve/

Continuando...

Você disse que estava "ficando branco", no código que você passou e eu testei, a única coisa que aconteceu foi: sumir a imagem. Pelo menos aqui nada "ficou branco". E, a imagem está sumindo por causa dessa regra no seu css:

a:hover img, a:focus img {visibility:hidden;}

lucasmilet· 28 de mai.

A questão não é ficar branco especificamente...

Eu queria deixar o fundo transparente. Tipo, quero utilizar a imagem no menu construído pelo código acima, mas não quero que a imagem fique com fundo (qualquer cor que seja), quero que ela fique transparente, recortada na imagem PNG, aparecendo apenas as letras da imagem.

Gostaria de saber o que devo modificar no código acima...

Grato

reebr· 29 de mai.

A imagem, ela que precisa estar com fundo transparente.

Mas veja bem, é necessário mesmo utilizar imagens? Você precisa somente do texto.

Se o problema for a fonte (você quer usar uma fonte diferente no seu site), você pode pesquisar por @font-face ou escolher uma fonte no https://www.google.com/fonts.

lucasmilet· 29 de mai.

Isso, eu tinha colocado uma imagem com fundo transparente, mas o fundo sempre ficava branco.

Daí inseri um fundo preto.

Eu Utilizo a fonte Kaufman. Utilizo imagem porque nem todos os navegadores reconhecem essa fonte.

Eu gostaria apenas saber se existe a possibilidade de fazer com que o fundo fique transparente. Tenho outros gadgets no meu site que tenho que colocar uma cor no fundo, pois sempre aparece branco, mesmo se a imagem tiver fundo transparente. Queria todos os fundos transparentes...

reebr· 29 de mai.

COM CSS não, a transparência precisa estar na imagem: http://jsfiddle.net/rnxn/Vttj3/

Com CSS você vai conseguir trabalhar somente a opacidade da imagem [ela toda, não somente o fundo].

Exemplo:

http://forum.imasters.com.br/public/style_images/imasters-2014/forum-sprite.png

gabriel-costa· 29 de mai.

Olá Lucas,

Tenta fazer o seguinte.

Nas imagens que você chama pelo CSS, faça da seguinte forma:

Exemplo:

a:hover img, a:focus img {

 background-color: transparent;
}

#home {
 background: transparent url('https://sites.google.com/a/tribosdejaco.com/tribosdejaco/home2.png') no-repeat;
}

Se der certo da um confirme aqui, valeu?

Valeu!

lucasmilet· 29 de mai.

Não consegui. Eu não utilizo o CSS, pois no Google Site eu só opero com gadgets em html.

Eu faço os testes no seguinte site:

https://sites.google.com/site/mori79/html-gadgets/how-tos/dynamic-content-writer

Já ouvi dizer que para gadget em html não funciona a expressão "background-color: transparent;"

Queria mesmo poder deixar somente a imagem, sem um fundo, com transparência.