Ir para conteúdo

POWERED BY:

Arquivado

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

NetBoy16

[Resolvido] opacity

Por , em Desenvolvimento frontend

Recommended Posts

NetBoy16    72

NetBoy16
Postado

Dae pessoal, tudo bem ?

 

Eu to fazendo uma pagina onde a div que contém o texto é transparente, apliquei opacity nela, mas o problema eh que o texto tb fica com opacidade, tentei aplicar uma opacidade reversa nele, mas n funciona, oque eu posso fazer ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

putz, oque eu posso fazer entao ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Será que se você criar uma div dentro de outra div não dá certo? assim você terá duas classes (uma pra cada) e no css você especifica qual você aplicará o efeito :) Eu tentaria...

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

deu nao, tudo q fica dentro da div com opacidade pega opacidade :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

nao eh da div, eh do texto, ele ta pegando a opacidade, mas eu quero ele normal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Esse é o comportamento padrão mesmo.

Possíveis soluções:

 

1. CSS3 e cores com transparência (funciona só em navegadores modernos).

Faça:

elemento {
background-color: rgba(0, 0, 0, 60); /* sendo que 60 é a opacidate */
color: #FFF;
}

 

2. Utilize uma imagem 1x1 px com transparência (funciona em todos os navegadores IE7+)

elemento {
background: url('images/1px.png') center center repeat; 
color: #FFF;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Enquando o Módulo para Cores das CSS3 não seja totalmente suportado pelos navegadores a solução clássica para evitar que a opacidade de um container seja herdada pelo seu conteúdo é usar dois DIVS dentro de um container, posicionados um sobre o outro.

Um DIV contém o texto (frente) e outro o fundo transparente.

Veja a seguir:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Texto opaco sobre fundo transparente</title>
<style>
.container { position:relative; }
.texto {
position:relative;
color:black;
}
.fundo {
position:absolute;
width:100%;
height:100%;
background-color:red;
/* Regras para opacidade crossbrowser */
	opacity: .5; /* Navegadores padrão */
	filter: alpha(opacity=50); /* IE 7 e anteriores */
	/* IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
</style>
</head>
<body>
<div class="container">
 <div class="fundo"></div>
 <div class="texto">
      <h1>Texto opaco sobre fundo transparente</h1>
      <p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus.</p>
  </div>  <!-- /texto -->
</div> <!-- /container -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

FK.    0

FK.
Postado

Apesar de resolver, uma div sem conteúdo usada para estilização, não deixa o código menos semântico ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Caramba que emoção, olha quem respondeu meu topico O.O

 

o dinossauro das css, a lenda, o maujor, sou teu fã :lol:

 

Vlw maujor e vlw pessoal :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Eu li o post e realmente você disse tudo, a pessoa tem que levar em consideração a semântica, mas não deixar isso dominar sua mente, acredito que se a pessoa quiser usar frames ou mesmo tabela para montar seu layout ela pode, com certeza, vai chegar no resultado que ela deseja, mas essa não é a forma mais correta e nem recomendada, se ela fizer seguindo os padrões web(webstandards) e a semântica seu código vai ficar mito mais limpo, de fácil entendimento e de fácil manutenção, mas tem situações em que por um pequeno momento temos que ir pela contramão e fazer algo que não siga a semântica mas que vai causar o resultado desejado, solucionando o problema, então é bem isso, seguir o que é certo mas não se deixar ser dominado por isso mas também não ter o "errado" como primeira opção, faz de acordo com a webstandards e seguindo a semântica, deu certo ? beleza, mas se tentou oque podia e não deu certo ? então vai pelo incoveniente para chegar a solução :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Fiz aquele esquema de colocar uma div antes da outra, e nessa primeira div aplicar o opacity, mas pra mim n funcionou :(

 

Clique aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Como não?

No link que você postou a opacidade foi aplicada tanto no menu horizontal como no div #agenda.

O fundo é preto com opacidade 0.5 e assim pode-se ver as nuvens atrás.

 

Entãu, que eu quis dizer é, a opacidade funcionou beleza, como pode ver o menu está transparente, mas as letras nao ficaram um branco puro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Entãu, que eu quis dizer é, a opacidade funcionou beleza, como pode ver o menu está transparente, mas as letras nao ficaram um branco puro.

 

Certinho aqui:

menu%20branco.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

qual navegador você usa?

 

aki no chrome n ta um branco puro :(

 

na verdade, observando bem o teu ta igual ao meu, mas tipo, n parece que tá um pouco cinza ? seilá, se for assim mesmo dá nada.

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