Caray un amigo me pregunta ¿como puedo tener un texto sobre un fondo transparente sin que el texto se haga también transparente?
Inicialmente me dije, esto se resuelve en 10min, así que intenté hacerlo y para mi sorpresa me sucedía exactamente lo que mi amigo e había dicho y dije hoooo!! no puede ser!! (aunque lo veía y no lo creía)
Así que decidí buscar como resolverlo y al parece ser que no es algo muy común o al menos la solución no lo es, pero haciendo prueba, tras prueba, tras prueba, tras prueba …. hasta el agotamiento! (ok! ya no exagero!) he logrado obtener una solución por demás simple y elegante
El primer área de texto es lo que pasa y que no quiere uno que suceda, tanto el texto como el fondo se vuelven transparentes y eso sucede cuando se anidan los divs y se le aplica la transparencia el div del fondo, pero se hereda a todos los elementos dentro de este.
La segunda área de texto, es la solución correcta y la he realizado usando un div para el texto con posición absoluta y luego un div aparte para el fondo, como el div del texto no afecta en el acomodo, el div del fondo se coloca por encima del texto.
Hay varios detalles a considerar, uno es que tanto la capa del texto como del fondo deben de tener el mismo tamaño y otra importante es que la capa de texto se tiene que colocar por encima de la capa de fondo usando el z-index.
El código HTML quedarían algo así
</pre> <h3>He aquí un ejemplo de como crear una caja con texto opaco y fondo transparente!</h3> <div class="container"> <div class="text">Esto es el texto bien bien opaco en color azul con fondo blanco semi-trasparente!!!</div> <div class="background trans"></div> <div class="text">Esto es el texto bien bien opaco en color azul con fondo blanco bien bien opaco!!!</div> <div class="background"></div> </div> <pre>
Ahora el CSS correspondiente es
.container { background-color: #FFA500; padding: 10px; } .text { width: 200px; height: 100px; background-color: transparent; padding: 10px; color: #0000FF; position: absolute; z-index: 1; } .background { width: 200px; height: 100px; background-color: #FFFFFF; padding: 10px; margin: 0px 0px 10px 0px; } .trans { opacity: 0.5; }
Y con esto se ha resuelto el dilema!!
Saludos Roger!
Gracias amigo !! ahora deja ver si lo puedo aplicar en lo que quiero hacer!! te agradezco mucho la atención !!
Podría hacerse poniendole relleno rgba a la caja del texto:
background: rgba(255,255,255, 0.5);
Hola una pregunta eh!! como puedo darle color al bakground aplicandole el rbga?
Hola
Tal como lo ha mencionado worg background: rgba(255,255,255, 0.5);
Espero haber entendido tu pregunta!
Salu2+
«para aplicar la transparencia sin que afecte al texto usar:
background: rgba (255,255,255, 0.7);
donde las tres primeras cifras corresponden al color (en esta caso blanco) en formato rgb y el 0.7 al nivel de transparencia aplicada. los valores de transparencia van de 0 A 1.
Espero les sea útil.
» by macc • hace un año
Esto lei en otro foro, creo que es mejor 🙂
Gracias Williams!
Una ayuda siempre es bien recibida!
Salu2+
Estimado worg
Pues no me queda más que agradecer tu aporte, lo he verificado con Opera, Chrome y Firefox y ha funcionado de forma correcta, creo que esta es una mejor solución!
Gracias por compartir!
oye, cierto! es mas o menos lo que se hace con algunas box shadows ¿no? gracias! siempre son buenos otros enfoques =D
Hola!!
pues sería como lo ha comentado: worg background: rgba(255,255,255, 0.5);
¿Si es esa tu pregunta?
Salu2+
hoooola rctorr!!!
revise el ejemplo ya que tengo un problema similar y no puedo solucionarlo!!
yo ya tengo un div que utiliza opacity y quiero clocar otro div sobre ese pero me temo que hereda as propiedades del primero como lo podría trabajar?
intente con tu ejemplo pero no me da solucion, me dio una ideas pero no es precisamente lo que busco.
gracias!!!
Hi daidoy!
Asi es hereda las propiedades, pero bien las puedes modificar, sólo ten en cuenta en que orden estás colocando la líneas del CSS, recuerda que la última es la que predomina o sobre escribe a las anteriores.
Que tal si compartes un poco del código que tienes para tener una mejor idea 😉 y veamos si lo podemos solucionar!
Salu2+
Definitivamente el comentario de worg fue buenisimo..
yo habia pensado lo mismo que rctorr pero por las dudas me puse a buscar y encontre esto, gracias a leer los comentarios resolvi el problema con una simple propiedad en css 🙂
Saludos!
Hi DarkByte!
Ciertamente a veces nos complicamos las cosas, pero como bien mencionas, gracias a estos fantásticos comentarios es que podemos seguir creciendo y aprendiendo.
Gracias por comentar y salu2+ desde México!
Perfecto, es lo que he estado buscando, lo he probado y muy agradecido ahora viene mi pregunta clave; mis etiquetas están casi escondidas haciendo efecto pestaña… ¿como le asigno el movimiento de transición al pasar el ratón sobre cada etiqueta? no sé como ponerlo, por lógica pensé en hacer «.container:hover {}» pero no funciona… a qué etiqueta le pongo la transición?
Hola Carlos!
Talves algo como…
.container:hover .tab {
}
donde .tab es la clase de la etiqueta a la que le quieres aplicar transición, es una posibilidad!
Salu2+
como hiciste esas cajas de color naranja podrías
enseñarme
Hola Jose Luis
Es simplemente el
O que parte es la que no te queda claro?
ya has intentado escribir el código y ver lo que sucede?
Salu2+buen año!
Tengo este blog http://la-otra-version.tumblr.com/ y quiero ponerle fondo blanco o semitransparente al contenido para que el texto no se pierda en el fondo… ayuda??
Hola Fer!
Ya vi tu blog, muy buen contenido por cierto! revisé un poco tumblr y veo que hay una forma de editar el código html, podrías enviar el código de tu tema? o así como está ya es como lo pensabas?
Salu2+
Gracias me sirvio de mucho
Hi Fernando!
que gusto! pues acá seguimos intentando hacer que estoy sea simple 😉
Salu2+
Hacer ese efecro es tan sencillo como una sola linea linea de codigo para un mismo div donde iran las letras. Asignar a la propiedad background el color de esta manera, rgba (0, 0, 0, 0.8) y listo. El 4o parametro es el nivel de opacidad.
Hola cdiazr82
Cierto, cierto, creo que tengo que actualizar mi nota, es otra opción más simple 😉
Salu2+
hola, en mi pagina he hecho una tabla pero cuando pongo el fondo transparente el video que tiene tambien esta transparente,¿como puedo hacer que no lo este?
Hola Mario!
Una razón es que el TAG donde estés colocando el vídeo esté heredando las propiedades de la tabla, una opción sería colocar un fondo no transparente a ese TAG.
La otra posible razón que se me ocurre es que el vídeo no tenga fondo, así que se verá transparente, por lo tanto asigna un fondo, creo que negro sería lo mejor para tenga buen contraste.
Algo final que podría ser es que tengas alguna propiedad opacity, no uses opacity en la tabla, de lo contrario todo el contenido de la tabla será también transparente, incluyendo el vídeo.
Bueno, espero te sirva de algo!
Salu2+
hola necesito que me ayudes a crear 2 cuadritos de texto y que se pongan uno ensima del otro y en los dos transparencia pero del segundo cuadro nomas se nota el color y el de abajo tiene color pero no es tanto la transparencia de abajo
Hola Jorge!
Creo que necesito un bosquejo a mano de lo que quieres hacer, porque si pones un cuadro encima de otro, aunque ambos sean transparentes, lo que pasará es que sólo se verá como si fuera uno, sumando las transparencias o mejor dicho, las opacidades de cada uno, así como los colores, resultando un color distintos a los dos, pero sólo verías un cuadro, lo que me parece más sencillo usar un sólo cuadro con el color resultante y la transparencia que necesitas, aunque posiblemente esté yo equivocado por eso me parece que un bosquejo sería mejor para describir lo que buscas 😉
Salu2+
Muchas gracias, me solucionaste con tu ejemplo un buen problemon!!!
Hola Aymara!
Wooow pensé que ya no era muy útil esta info hoy en día, pero que gusto que te haya servido!
Mejor aún gracias por comentarlo!
Salu2+ {bgcolor:felices; color:fiestas;}
Gracias me sirvió mucho xd, estaba por explotar por la opacidad pero con el rgba ya todo solucionado c:
Hola Crisacevedo
No pensé que a estas alturas aún fuera información útil y yo pensando que ya sería hr de borrar el blog!
Gracias por comentar y que tu proyecto siga adelante!
Salu2!
como podria hacer para que el cuadro transparente con el texto quede centrado?
Hola Corina!
Quieres centrar el cuadro en toda la página?
Si si, entonces al cuadro aplica los estilos de: margin: 0px auto;
Saludos!
Te agradezco mucho, es lo mínimo que puedo hacer. Me has ayudado mucho
Hola Ben
Gracias por el comentario, no pensé que aún fuera útil esta nota de hace ya casi 10 años, ánimo y éxito en tus proyectos!