Tengo un pequeño problema, a ver si alguien me lo puede resolver.
Resulta que a un determinado div le doy un color de fondo y cierta transparencia mediante "opacity: .7 ; filter:alpha (opacity=70)", pero ahora todo lo que coloco en dentro de ese div me sale con esa transparencia, y me gustaria que por ejemplo si coloco una imagen fuera totalmente opaca. ¿Alguien sabe como puedo solucionar esto?
Saludos
pues podrias crear una imagen de ese color,ponerla semitansparante y ponerla de fondo del div
Bueno encontre la solución al problema. Os pongo aquí como se hace por si alguien esta interesado:
Al poner opacidad o transparencia a una capa, todo lo que pongamos en ella va adquirir esa transparencia, ya sea otra capa que metemas dentro, una imagen, parrafo, etc. Por lo tanto si queremos que las imagenes por ejemplo que metemos en una capa con transparencia sean opacas, lo que debemos hacer es crear dos capas del mismo tamaño y en la misma posición, es decir que se superpongan. Para esto podemos usar mediante la hoja de estilos las propiedades
{position:absolute ; top:100px ; left:20px}
De esta manera las dos capas se colocan en la misma posición superpuestas. Ahora para definir que capa se coloca encima y cual debajo utilizamos la propiedad
{z-index:1}
z-index puede adquirir valores desde 0 en adelante; cuanto mayor sea el número más arriba estará.
Espero haberme explicado bien.
Un saludo.
hola me interesaria saber un poco de lo que decis pero de verdad no entiendo bien ,perdon pero soy muy nuevo en esto.
si medas una explicacion un poco mas para bb con algun ejemplo asi lo pongo en mi pagina de prueba .te lo voy a agrdecer mucho!! gracias
Bueno voy a intentar explicarlo un poco mejor, aunque yo también soy novato en esto, y la vedad que lo de las transparencias lo consegui a base de mucho probar y cambiar cosas, pero al fin y al cabo consegui lo que queria; quizas hay alguna forma mas facil de hacerlo pero asi es como lo consegui yo:
- lo primero es tener una capa o div al que aplicarle la transparencia. Esto se hace mediante las propiedades "opacity: .7 ; filter:alpha (opacity=70)", que nos indica una transparencia del 70%. (son dos propiedades para que se vea bien en todos los navegadores). Por lo tanto tendriamos un div con unas determinadas dimensiones, un color de fondo y una transparencia aignada. Quedaria así
codigo html
<div id="contenido"></div>
css
#contenido {width:600px ; height:400px ; background-color:#BEBEBE ; opacity: .7 ; filter:alpha (opacity=70) ; border:2px solid black ; margin: 5px 5px 5px 5px}
Con esto tendriamos una capa de ciertas dimensiones, con borde, margenes a los lados y con un color con cierta transparencia.
-El problema surge porque ahora cualquier elemento que introduzcas (capas, texto, imagenes, etc) adquiere esa transparencia, lo cual no queda bien. Por ello se debe crear otra capa que se situe en la misma exactamente en la misma posición, por encima de la transparente donde colocar todo aquello que no queramos que le afecte la transparencia.
Para ello creamos otra capa de las mismas dimensiones, pero para situarla en el mismo lugar se debe utilizar la propiedad "position".
"position" puede adquirir dos valores: absolute y relative. Con absolute se debe indicar su posicion mediante top y left. Por ejemplo:
#contenido {position:absolute ; top:10px ; left:20px} Esto nos indica que siempre estara situada a 10px del la parte superior de la pagina y a 20px de la parte izquierda. Esta opción no es muy recomendable, ya que si por ejemplo minimizamos la pagina se siguen mantenindo esas distancias y todo se mueve.
Lo mejor es utilizar "position:relative" que nos permite darle margenes respecto a otros elementos de la pagina. Lo mas fácil es crear una capa de las dimensiones que queramos y situarla donde nosotros queramos en nuestra pagina; y dentro de esta colocaresmos nuestra capa transparente y la otra que va por encima donde colocar los elementos. Quizas no se entienda muy bien pero viendo el ejemplo igual se aclara algo
HTML
<div id="contenido">
<div id="contenido1"></div>
<div id="contenido2"></div>
</div>
CSS
#contenido {width:600px ; height:auto ; margin:5px 5px 5px 5px}
#contenido1 {position:relative ; margin-top:0px ; margin-left:0px ; z-index:1 ; width:600px ; height:400px ; border:2px solid black}
#contenido2 {position:relative ; margin-top:-400px ; margin-left:0px ; z-index:0 ; width:600px ; height:400px ; border:2px solid black ; background-color:#BEBEBE ; opacity: .7 ; filter:alpha (opacity=70)}
Si te fijas en el codigo hay una propiedad "z-index" que indica que capa va por encima de la otra. Las capas con mayor numero van por encima.
Otra cosa a tener en cuanta es que en la capa contenido2, que es a la que se le aplica la transparencia, margin-top debe ser igual pero en negativo a la altura de la capa para que queden una exactamente encima dela otra.
Todo los elementos deben ir dentro de la capa contenido1.
Buff creo que me lie un poco explicandolo, pero es que no soy muy experto en esto. Con el ejemplo y probando fijo que consigues cosas interesantes. Quizas alguien mas entendido pueda darnos algo de luz en esto, y sino ya sabes cualquie duda te contestare encantado a lo que sepa.
Saludos
Muchas Gracias!!!! Solucionaste mi problema, hace unas horas abri un Post con este tema, necesitaba una respuesta y la que has dado es exactamente la que buscaba :lol: :D :P .... Mil Gracias en verdad no sabes como me rompia la cabeza para tratar de hacerese efecto de Opacidad sin que se vean afectados el texto e imagenes dentro de la misma capa..... Gracias Canchal...!!!! te pasaste!!!! ... Muchos besitos y abrazitos!!!! Giannina...