CSS: Apenas o Background transparente e não o texto...

Mr Banzaroli · 30 de março de 2011

Amigos;

Estou com uma certa duvida. Estou aplicando no CSS um background com a opacity de 0.4 (exemplo), só que o texto e imagem que ficam dentro desta div também esta ficando com essa transparência. Como eu faço para aplicar apenas no background-color e não no conteúdo da div?

Codigo CSS:

#ServicoMenuE {
	position:relative;
	background-color:#000;
	filter:opacity(alpha=60);
        -moz-opacity:0.3;
        opacity:0.3;
	width:298px;
	height:100px;
	padding:5px;
	margin-top:5px;
	float:right;
	border:1px solid #1B1B1B;
	}

Codigo HTML:



<div id="ServicoMenuE">

            <div id="ServicoMenuTitulo">
                <h3>Web Design</h3>
                </div>

                <div id="ServicoMenuIm">
                IMAGE
                </div>

                <div id="ServicoMenuTx">
                	<p>Aqui vem o texto de apresentação do serviço elaborado atraves do seu titulo</p>

                </div>

            </div>

Abraço!

Amigos...

Infelizmente a unica opção que encontrei foi mesmo criar um bg.PNG semi-transparente e instalar como background da div. Mas, se alguém souber a forma sem utilizar uma imagem, por favor me diga

abraço!

Roberto.Korea · 30 de março de 2011

Bom dia Banzaroli,

o que você poderia fazer é criar dois estilos, um para a background e outra para o que está escrito.

No que está escrito você põe a opacity:0.0, anulando a opacity do background.

Veja se dará certo.

Wilson Neto · 31 de março de 2011

Aê Roberto acredito que isto não funciona (opacity: 0.0 vai fazer o elemnto ficar invisível)...

Que eu saiba, por enquanto a maneira mais indicada é usar usar uma imagem mesmo, mas daqui pouco tempo (eu espero) poderemos usar rgba(), disponível no CSS 3...

Exemplo que funciona no Firefox 4 e Chrome:


<html>
 <head>
  <style type="text/css">
  body{
	background-image: url(http://3.bp.blogspot.com/_yNCApsZePsQ/TH4-Zc4-4HI/AAAAAAAAFZM/VeAPnmys9D8/s1600/bg-twitter-7.png);
  }
  div{
	background-color: rgba(255,255,255,0.8);
	height: 100px;
	width: 50%;
	margin: 10% 25%;
	text-align: center;
	border-radius: 15px;
  }
  </style>
 </head>
 <body>
  <div>
   <span>
    <br />Até rgba() estiver "realmente disponível"<br />usar imagem é o mais indicado mesmo...
   </span>
  </div>
 </body>
</html>

hekick · 6 de setembro de 2012

Também estou enfrentando este problema, e encontrei duas soluções:

1) deixar um div para o background e um p para o texto

2) utilizar apenaso background, exemplo:

background-color: rgba(0, 0, 0, 60); /* sendo que 60 é a opacidate */

Solução fornecido pelo Henrique Barcelos

No meu caso funcional 100%!

[]´s

DiF · 6 de setembro de 2012

@hekick, levantou um tópico morto mas contribuiu para o andamento do tópico.

Explicando melhor sua solução... a partir do CSS3 foi criado um elemento chamado Alpha filter. com isso criaram uma função chamada RGBA() onde R é o canal vermelho, G o canal verde, o B é o canal azul e o A é o filtro de opacidade.

Lembrando que o numero mais alto é mais opaco, ou seja, se 0.1 é praticamente transparente, 1 já é considerado opaco. Com essa função eliminamos a ideia de usar uma imagem de fundo para a transparencia do background.