Làm thế nào để trang trải một div

Question

Hãy nói rằng chúng tôi có một div như sau:

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

Các văn bản có thể được nữa. Vì vậy, nó có thể là 3 ký tự, 150 hoặc 300. Div có đường viền là border: 1 px solid black trên background: white. Có cách nào để tạo một div khác (với vị trí relative hoặc absolute tôi đoán) hoàn toàn bao gồm div này sao cho văn bản không đọc được?

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> 

Something như thế có thể làm việc, bạn có thể phải chơi với chỉ mục z để đảm bảo hộp màu trắng của bạn ở trên cùng. Về cơ bản, div bên trong đó bắt đầu ở góc trên cùng bên trái của div bên ngoài và có cùng kích thước với nó.

Answer 2

Bạn đang cố gắng đạt được điều gì? Bất kỳ lý do nào bạn cần một div khác?

Nếu bạn chỉ cố gắng để che giấu các dữ liệu tại sao không làm bạn chỉ cần:

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

Và đảm bảo văn bản của bạn cũng là 'đen'

Answer 3

Tôi không rõ 100% lý do tại sao bạn đang cố thực hiện việc này, nhưng tôi tự hỏi liệu bạn có xem xét ẩn hoàn toàn div của mình bằng cách sử dụng chế độ hiển thị: ẩn; phong cách 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 (thay thế hình ảnh):

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