DIV 和 CSS：半透明内的浮动框 div

Question

我正在 visualforce 页面中创建它，但由于 stackexchange 政策，我需要在此处 post 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

您是否正在寻找这样的东西？

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;"></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;">
 <div style="background-color: rgba(255, 255, 255, 0.3);padding: 20px;">
  <h>Transferring Records...</h><br>
  <img src="/img/loading32.gif"><br>
  <h>This may take a minute or two...</h>
 </div>
</div>

Answer 2

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

既然你想让你的白盒子在你的容器里，为什么不这样构造呢？通过固定外容器（使用 class overlay，在 CSS 中引用为 .overlay），您现在可以正确定位内盒，将其从左侧移动 50%，然后top 然后使用 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 可以专门针对嵌套在 class overlay 框内的 divs .

Answer 3

要为 div 添加白色背景，请使用 background: white;。然后你遇到的问题是你的文字也是白色的，所以你必须将 color 更改为 color: black （或其他颜色）。

了解 SalesForce，您可能需要圆角，因此为此添加 border-radius: 10px;:)

要更圆角，请将 10px 增加到更大的数字，比如 20px，要减少圆角，减少数字，比如 5px

如下片段

<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:black; font-weight:bold; text-align: center; background: white; border-radius: 10px;">
  <h>Transferring Records...</h>
  <br />
  <img src="/img/loading32.gif" />
  <br />
  <h>This may take a minute or two...</h>
  <br />
</div>

DIV 和 CSS：半透明内的浮动框 div

DIV and CSS: Floating box inside semi transparent div

html

css

visualforce