Elementos no transparentes dentro de elementos transparentes | Programar Plus

Actualización en 2018: si bien todavía no tenemos algo como background-opacity, ahora tenemos rgba () y hsla (), que serían la solución fácil para colores sólidos como en este artículo.

El lector Shane dejó un comentario:

Si usa transparencia en un elemento de bloque, también hace que el texto interior sea transparente. ¿Hay alguna manera de evitar que eso suceda? Intenté poner el texto en otro div y establecer la opacidad al 100%, pero no funcionó. Aunque, lógicamente, ¡pensé que sí!

transpexample.jpg

Lógicamente, eso tiene sentido para mí. ¿Es así como funciona en la práctica? Por supuesto que no. En mi opinión, esta es una falla importante de CSS. La gente solo suponer que esto es posible. Es un efecto muy común en el diseño de impresión. Desafortunadamente, no es tan fácil en la web. Aquí hay una forma de salir de este lío.

Primero, crea una barra asegurándose de usar la configuración de CSS para todos los navegadores. Aquí está la barra:

<div class="bar">
  <h2>Some mild-mannered text trapped inside a bar.</h2>
</div>

Y así es como lo estilizas:

.bar {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}

Aquí es donde nota que el texto dentro de la barra se toma en la transparencia de la barra misma. No quieres eso, ¡hace que el texto sea difícil de leer! Entonces te vuelves inteligente y aplicas 100% de transparencia al texto dentro del div. ¿No funciona bien?

Tendrás que recurrir a algunos trucos.

Hasta donde yo sé, simplemente no hay forma de forzar a esos elementos secundarios a ser un menos transparente que su elemento padre. Y ahí está la solución. ¿Y si ese elemento secundario no fuera técnicamente un elemento secundario?

Como probablemente sepa, el hecho de que un elemento ocupe el mismo espacio que otro elemento no hace que uno sea hijo del otro. Esa es la belleza del posicionamiento CSS. Entonces, el truco para convertir nuestro texto no transparente en un div transparente es simplemente poner ese texto fuera del div y empujarlo visualmente hacia adentro con algo de posicionamiento CSS.

Así es como lo haremos:

<h2 class="ontop">Haha! I'm free of my transparent prison.</h2>
<div class="bar"></div>

Observe la clase aplicada al texto. Ahora tendrá que hacer lo que sea necesario con el posicionamiento CSS para llevarlo a donde debe estar. Los márgenes negativos son una forma popular de hacer esto. Aquí acabo de establecer la posición superior:

h2.ontop {
  position: relative;
  top: 4.7em;
}

Ver demostración