quitar transparecia (aumentar opacidad)

halcon_rojo · #1 (**permalink**) 17/11/2011, 10:26

hola estoy haciendo pruebas en una pagina y coo no domino bien CSS tengo muchas dudas, pa mas importante es respecto al control de opacidad de lso objetos, resulta que he creado un estilo:

Código:

#border {
	margin: 50px;
	background-color: #d0e0ff;
	filter: alpha(opacity=60);
	opacity: .60;
               -moz-opacity: .60;
}

y lo aplique a un contenedor table:

Código:

<table width="800" border="0" align="center" id="border">
		<tr>
		<td width="800" colspan="4"><p align="center">&nbsp;</p></td>
		</tr>

etc...

(se que deberia usar DIVs en vez de TABLe pero mis limitados conocimientos hacen que table sea mas facil y rapido)
Funciona bien, da el efecto que esperaba pero resulta que cuando inserto mas cosas dentro del table estos tambien son transparentes (textos, imagenes, inputs) lo que hasta cierto punto tambien me parece bien ya que es parte de lo que deseo hacer pero en algunos casos como los INPUT, SELECT (elementos de un form) quisiera quitar esa transaparencia, intente darles un estilo propio pero no funciona, algun consejo?

linuxzero · #2 (**permalink**) 17/11/2011, 10:39

Fijate si te sirve este post:

http://www.forosdelweb.com/f53/quitar-opacidad-513653/

Saludos!

emprear · #3 (**permalink**) 17/11/2011, 12:17

lo más aconsejable es que definas clases espwecíficas para las etiquetas y juegues con los selectores, y no aplicar una propiedad a un elemento que globalmente no quieras afectar, como toda la tabla

Ejemplo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
form label, form span{
opacity: .7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
background-color: #353535;
}
/*]]>*/
</style>
</head>
<body>
<div>
Formulario
<form action="#">
<span>Ingrese sus datos</span>
<label>Nombre : </label><input type="text" name="nombre" value="ingresa tu nombre"/>
</form>
</div>
</body>
</html>

Saludos

halcon_rojo · #4 (**permalink**) 17/11/2011, 14:39

gracias a ambos, ahora lo tengo mas claro

linuxzero · #5 (**permalink**) 17/11/2011, 14:42

Nos alegramos mucho ;)