Background com opacidade

[pedrovoltaire 0]

Boa tarde Galera,

Em primeiro lugar obrigado pela atençao.

É o seguinte, eu fiz uma div e essa div tem borda branca e o background é laranja, até aí tudo bem, o problema é que quero que a borda continue com o branco solido(sem transparencia) e quero colocar transparencia no background. Ok, coloquei assim :

background-color: #ff9900 ; filter:alpha(opacity=70);

Mas aí aplicou a transparencia a borda também.

Logo eu gostaria de uma ajuda de como isso pode ser feito.

Segue meu código do div completo. Obrigado:

 

.div_aluno {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	background-color: #ff9900; :wacko: 
	color: #333333;
	border-style: solid;
	border-color: #ffffff;
	border-width: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	position:absolute;
	top:75px;
	left:600px;
	width:300px;
	height:12px;
	z-index:2;
}

[brcontainer 16]

nesse caso seria bom criar dois elementos.

Um elemento que fique com z-index:1; e um elemento com z-index:2;,

você tambem quer que não tenha 70 de opacidade no texto??

 

ae o elemento z-index:1; recebe o efeito OPACO=70 e o z-index:2; continua sem transaparencia

e o obejeto com z-index:2; recebe a borda ;)

[pedrovoltaire 0]

isso mesmo no texto também nao quero opacidade,

vou tentar como você disse, mas será que nao tinha um estilo para aplicar direto na tag do background?

Mas já ajudou bastante.

Valeu.

[pedrovoltaire 0]

ok, deu certo

[programador php 0]

poste o codigo final cara

 

 

pode ajudar muita gente!!!

 

 

abraço

[pedrovoltaire 0]

ficou assim:

.div_aluno {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	background-color: #FF6600;
	filter:alpha(opacity=75);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	position:absolute;
	top:75px;
	left:600px;
	width:300px;
	height:24px;
	z-index:1;
	
}
.div_aluno2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	background-color: transparent;
	border-style: solid;
	border-color: #ffffff;
	border-width: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	position:absolute;
	top:75px;
	left:600px;
	width:300px;
	height:12px;
	z-index:2;
	
}

Valeu galera.

[pedrovoltaire 0]

Galera, só tem um problemão.

No FireFox, nao fica igual,

[William Bruno 1501]

Isso é tecnologia da Microsoft..

filter:alpha(opacity=xx);

Para fazer no FireFox, e alguns outros... adicione isso:

opacity:0.xx; -moz-opacity: 0.xx;
	-khtml-opacity: .xx;

No lugar do "xx", coloque um valor de 01 à 99

(lembrando que não tem sentido usar isso, se for querer 100% de opacidade.. )

[programador php 0]

bem lembrando...

 

esse code aqui

 

opacity:0.xx;

qual browser??

sei que o FF precisa disso aqui acima!!

 

e esses outros?

 

-moz-opacity: 0.xx;

qual browser??

-khtml-opacity: .xx;

qual browser??

 

 

abraço

[William Bruno 1501]

Ah, desculpe... eu fui ajuntando esses filtros proprietários, nem me liguei de destacar para quais navegadores cada um funciona.

 

-khtml-opacity: .xx; /* Safari e Konqueror ( engine kHTML ) */
opacity: .xx; /* FF, Opera, atuais CSS3 */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=xx); /* Internet Explores 5.5+ */
-moz-opacity:0.xx /* Para alguns "Mozillas" */

[programador php 0]

beleza!!

 

é bom saber disso

 

mais uma coisinha

 

com isso o documento ainda se torna valido?

 

abraço

[William Bruno 1501]

Não, tendo em vista o validador do w3c não reconhece tecnologias proprietárias neh?!...

 

Ai você deixaria de validar o CSS, por causa disso. A recomendação é usar PNGs transparêntes... esse formato foi o proprio consorcio que desenvolveu para esses efeitos. O problema é que o IEca não aceita muito bem PNG...

Existe ainda uma solução com GIF...

 

Enfim, cada coisa é uma coisa, cada situação temos de resolver de algum jeito, o ruim é qndo esta solução gera outro problema.