html - DIV 和 CSS : Floating box inside semi transparent div

Question

我正在 visualforce 页面中创建此内容，但由于 stackexchange 政策，我需要在此处发布 Web 开发问题。

我有以下 HTML 代码:

<div style="position: absolute;  top: 0; left: 0; right: 0; bottom: 0;  opacity: 0.75; z-index: 1000; background-color: gray;">
  &nbsp;
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
  <h>Transferring Records...</h><br />
  <img src="/img/loading32.gif"/><br />
  <h>This may take a minute or two...</h><br />
</div >

它会生成一个全屏灰色叠加层，然后我的文本和图像位于中心。

我想做的是在我的文本周围创建一个较小的白框，以便更容易阅读。任何人都可以帮我吗？

这是当前设置的屏幕截图:

Answer 1

就我个人而言，我会稍微改变你的结构并解耦你的 CSS - 如果只是为了你在阅读内容之间的内容时保持理智(如果你愿意，你可以简单地将它包含在 <style type="text/css"></style> 标签中，它会起作用

既然你想让你的白盒子在你的容器里，为什么不这样构造呢？通过修复外部容器(使用类 overlay，在 CSS 中引用为 .overlay)，您现在可以正确定位内部框，方法是将其从左侧和顶部移动 50%，然后使用 translate 变换框本身。 , 将其移动减去其宽度和高度的一半。现在你的结构有意义了，你可以用你的内盒做任何你想做的事:

div.overlay {
  position: fixed;  
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; 
  background-color: gray;
  background-color: rgba(150,150,150,.5);
}
div.overlay div {
  position: absolute; 
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: black; 
  font-weight: bold; 
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,.5)
}

<div class="overlay">
  <div>
    <h>Transferring Records...</h>
    <br /><img src="/img/loading32.gif"/>
    <br /><h>This may take a minute or two...</h>
  </div>
</div>

这种结构也使它易于使用，因为所有内容都简单地包含在一个元素中，并且您可以控制其中的所有内容。更容易调试，更容易推理(元素的关系很明显)并且你的 CSS 可以专门针对 div嵌套在类别为 overlay 的框内的 s .