Inicio > Diseño web > Texto opaco sobre fondo semi-transparente con CSS

Texto opaco sobre fondo semi-transparente con CSS

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!

Anuncios
Categorías:Diseño web Etiquetas: ,
  1. 4 enero, 2012 en 18:04

    Gracias amigo !! ahora deja ver si lo puedo aplicar en lo que quiero hacer!! te agradezco mucho la atención !!

  2. 5 febrero, 2012 en 13:47

    Podría hacerse poniendole relleno rgba a la caja del texto:
    background: rgba(255,255,255, 0.5);

    • 30 junio, 2012 en 13:41

      Hola una pregunta eh!! como puedo darle color al bakground aplicandole el rbga?

      • 30 junio, 2012 en 14:23

        Hola

        Tal como lo ha mencionado worg background: rgba(255,255,255, 0.5);

        Espero haber entendido tu pregunta!

        Salu2+

      • Williams
        16 mayo, 2014 en 16:14

        “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 🙂

      • 17 mayo, 2014 en 02:17

        Gracias Williams!

        Una ayuda siempre es bien recibida!

        Salu2+

  3. 5 febrero, 2012 en 17:46

    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!

  4. Farit
    7 febrero, 2012 en 05:03

    oye, cierto! es mas o menos lo que se hace con algunas box shadows ¿no? gracias! siempre son buenos otros enfoques =D

    • 30 junio, 2012 en 14:29

      Hola!!

      pues sería como lo ha comentado: worg background: rgba(255,255,255, 0.5);

      ¿Si es esa tu pregunta?

      Salu2+

  5. daidoy
    10 enero, 2013 en 11:46

    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!!!

    • 10 enero, 2013 en 17:34

      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+

  6. 21 junio, 2013 en 16:32

    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!

    • 21 junio, 2013 en 16:59

      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!

  7. 8 julio, 2013 en 08:06

    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?

    • 8 julio, 2013 en 08:34

      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+

  8. jose luis
    30 diciembre, 2013 en 13:25

    como hiciste esas cajas de color naranja podrías
    enseñarme

    • 30 diciembre, 2013 en 16:14

      Hola Jose Luis

      Es simplemente el

      con la propiedad de color de fondo aplicado!

      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!

  9. Fernanda
    9 febrero, 2014 en 10:24

    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??

    • 10 febrero, 2014 en 01:16

      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+

  10. Fernando
    31 agosto, 2014 en 13:47

    Gracias me sirvio de mucho

    • 31 agosto, 2014 en 23:19

      Hi Fernando!

      que gusto! pues acá seguimos intentando hacer que estoy sea simple 😉

      Salu2+

    • 1 septiembre, 2014 en 00:54

      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.

      • 1 septiembre, 2014 en 08:37

        Hola cdiazr82

        Cierto, cierto, creo que tengo que actualizar mi nota, es otra opción más simple 😉

        Salu2+

  11. Mario
    27 noviembre, 2014 en 11:19

    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?

    • 28 noviembre, 2014 en 07:09

      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+

  12. jorge
    24 octubre, 2017 en 18:26

    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

    • 25 octubre, 2017 en 01:55

      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+

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

PiKon

3D Printing + Raspberry Pi Camera = PiKon Telescope

gvSIG blog

gvSIG project blog

Python Adventures

Welcome to the Jungle!

A %d blogueros les gusta esto: