Foros del Web » Creando para Internet » CSS »

Div con transparencia superpuesto a texto

Estas en el tema de Div con transparencia superpuesto a texto en el foro de CSS en Foros del Web. Hola! Me llamo Lara. Estoy practicando haciendo una web. Por el momento unicamente he hecho la pagina de registro. El problema esta en que al ...
  #1 (permalink)  
Antiguo 29/03/2013, 14:18
 
Fecha de Ingreso: marzo-2013
Ubicación: Mar del Plata
Mensajes: 8
Antigüedad: 11 años
Puntos: 0
Div con transparencia superpuesto a texto

Hola! Me llamo Lara. Estoy practicando haciendo una web. Por el momento unicamente he hecho la pagina de registro. El problema esta en que al cambiar el tamaño de la ventana se perdia el formulario y habia que moverse con los scrolls para poder verlo. He puesto un contenedor con -margin:auto- para conseguir que el contenido se mantenga centrado en la ventana mientras esta cambia de tamaño. Ahora mi problema es que quiero usar una trasparencia para el fondo del formulario y no consigo ponerla detras del formulario. Estoy practicando con este codigo:

<html>
<head>

<style>
#fondo
{width:100px;
height:50px;
margin:auto;
background-color:red;
filter:alpha(opacity=50%);
opacity:0.5;

}
#class1
{width:100px;
margin:-50px auto 0px auto;

}
#class2{
width:40px;
text-align:center;
display:inline-block;
}
#class3
{
text-align:right;
width:60px;
height:30px;
display:inline-block;
background-color:blue;
}

</style>
<body>
<div id="fondo"> </Div>
<div id="class1">
<div id="class2"> hola</div><div id="class3">mundo</diV>
</div>
</body>
</html>



----
El exito sería que se viera el azul intenso sobre el rojo con transparencia.

Pd: Tampoco se como aplicar la trasparencia para IE :)

¿Que puedo hacer?
  #2 (permalink)  
Antiguo 29/03/2013, 14:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Div con transparencia superpuesto a texto

Bienvenida al foro.

En vez de usar opacity, que aplica la transparencia a su contenido, puedes usar un color de fondo transparent usando rgba() o hsla(). Que es como usar rgb() o hsl() pero con un canal de transparencia añadido.

Quita el filter y el opacity y cambia el color a tu #fondo:

Código CSS:
Ver original
  1. background-color: rgba(255,0,0,0.5);

El 0.5 al final indica una transparencia del 50%. Los valores van del 0 al 1.
  #3 (permalink)  
Antiguo 29/03/2013, 14:50
 
Fecha de Ingreso: marzo-2013
Ubicación: Mar del Plata
Mensajes: 8
Antigüedad: 11 años
Puntos: 0
Respuesta: Div con transparencia superpuesto a texto

Gracias!
Use el codigo, funciona perfecto con crhome, como todo. Luego vere de hacerlo compatible con Explorer. Todo pierde sentido al usar ese navegador. :/
Aprendí en alguna pagina que -filter:alpha...-sirve sobre algun navegador, -opacity:..;- sirve sobre otro y vi alguna combinación para Explorer que al usarla no funcionó. Muchas webs indican que he de usar una .png, pero creo que esa opción no es nada realista.
El codigo -backgroung: (color,opacity);- ya lo habia visto alguna vez, funciona perfecto sobre chrome pero no se ve sobre mi version de Explorer.

Si se les ocurre algo diganme si me equivoque .
  #4 (permalink)  
Antiguo 29/03/2013, 14:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Div con transparencia superpuesto a texto

En IE9 e IE10 debería de funcionar sin mayor problema. Luego en los demás funciona en prácticamente todas las versiones, Safari, Chrome, Opera, Firefox, etc. Tienes aquí una tabla: http://caniuse.com/css3-colors

Yo personalmente intento no molestar demasiado a IE8 y anteriores, no vaya a ser que despierten de su agonía o de sus tumbas.
  #5 (permalink)  
Antiguo 29/03/2013, 14:58
 
Fecha de Ingreso: marzo-2013
Ubicación: Mar del Plata
Mensajes: 8
Antigüedad: 11 años
Puntos: 0
Respuesta: Div con transparencia superpuesto a texto

haha! Hace mucho que no lo uso y cuando lo abro para comprobar algo se abren unas 5 ventanas.. Da muucho miedito ! haha!
  #6 (permalink)  
Antiguo 29/03/2013, 15:18
 
Fecha de Ingreso: marzo-2013
Ubicación: Mar del Plata
Mensajes: 8
Antigüedad: 11 años
Puntos: 0
Respuesta: Div con transparencia superpuesto a texto

Una mas pregunta mas ! NO puedo dejar pasar la opportunidad.

La siguiente es como dar puntas redondeadas al div.
He encontrado esto, y funciona perfecto con chrome pero la parte de Explorer no la se:

webkit-border-radius: 10px; /* Para Safari y Chrome */
-moz-border-radius: 10px; /* Para Firefox */
-khtml-border-radius:10px; /* Navegadores de Linux */
border-radius: 10px; /* CSS3 */


_Creo que seguir buscando para aplicar las indicaciones de algunas paginas y ver si funcionan sería lo mas adecuado, pero son muy complicadas y quizas alguien sabe como aplicar borde redondeado sin cambiar el html.

Última edición por larucha3000; 29/03/2013 a las 15:48

Etiquetas: html, scroll, tamaño, transparencia
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:33.