Question

假设我们有一个div如下：

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

文字可以更长。所以它可以是3个字符，150或300。 div与border: 1 px solid black之间的边界为background: white。有没有办法创建另一个div（位置relative或absolute我猜）完全覆盖这个div，以便文本不可读？

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>

这样的东西可以工作，你可能必须使用z-index来确保你的白盒子在顶部。基本上，内部div从外部div的左上角开始，并且与它的大小相同。

Answer 2

CSS：

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

CSS（图像替换）：

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

Answer 3

你想要达到什么目的？你需要另一个div的原因吗？

如果您只是想隐藏数据，为什么不呢：

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

确保您的文字也是“黑色”

Answer 4

我不是100％清楚你为什么要这样做，但我想知道你是否考虑过隐藏你的div完全使用visibility：hidden; css风格。

如何覆盖div

4 个答案: