Cómo cubrir un div

Question

Digamos que tenemos un div de la siguiente manera:

<div class="post">Variable text</div> 

El texto puede ser por más tiempo. Por lo tanto, podría ser de 3 caracteres, 150 o 300. El div tiene un borde de border: 1 px solid black sobre un background: white. ¿Hay alguna manera de crear otro div (con la posición relative o absolute, supongo) que cubre completamente este div para que el texto no se pueda leer?

Answer 1

<div class="post" style="position:relative"> 
    Variable text 
    <div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:white"></div> 
</div> 

Algo así podría funcionar, puede que tenga que jugar con el índice z para asegurarse de que su cuadro blanco esté en la parte superior. Básicamente, ese div interno comienza en la esquina superior izquierda del div externo y es del mismo tamaño que él.

Answer 2

¿Qué estás tratando de lograr? ¿Alguna razón por la que necesitas otro div?

Si sólo está tratando de ocultar los datos ¿Por qué no simplemente:

<div class="post" style="background-color:black;">Variable text</div> 

Y garantizar su texto también es 'negro'

Answer 3

No estoy 100% claro de por qué estás tratando de hacer esto, pero me preguntaba si has considerado ocultar tu div completamente usando la visibilidad: oculta; estilo css.

Answer 4

CSS:

.outer { 
    position:relative; 
    z-index:10; 
} 
.inner { 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    z-index:20; 
} 

CSS (sustitución de la imagen):

.outer { 
    text-indent:-9999em; 
    height:0; 
    padding:100px 0 0 0; 
    width:100px; 
    background-image:url(100x100.jpg); 
} 

HTML:

<div class="outer"> 
    <div class="inner"></div> 
    Text to Replace 
</div>