Ir para conteúdo

POWERED BY:

Arquivado

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

lucasmilet

Fundo Transparente - Google Site

Por , em Desenvolvimento frontend

Recommended Posts

lucasmilet    0

lucasmilet
Postado
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"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/home1.png"></a> 



<a id="abanda" href="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"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/musicas1.png"></a> 



<a id="fotos" href="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"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/videos1.png"></a> 



<a id="espacodofa" href="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"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/tribosnamidia1.png"></a> 



<a id="agenda" href="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"><img src="https://sites.google.com/a/tribosdejaco.com/tribosdejaco/contrate1.png"></a> 

    ]]> 

  </Content>

</Module>


Compartilhar este post

Link para o post
Compartilhar em outros sites

jerfeson    1

jerfeson
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

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: rgba(255,255,255,0.6);

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasmilet    0

lucasmilet
Postado

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á.

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

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;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasmilet    0

lucasmilet
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasmilet    0

lucasmilet
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabriel-costa    1

gabriel-costa
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

lucasmilet    0

lucasmilet
Postado

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.

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