DIV和CSS：半透明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，将它的宽度和高度减去一半。现在你的结构很有意义，你可以用你的内盒做任何你想做的事情：

＆＃13;

＆＃13;

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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这种结构也使其易于使用，因为所有内容都只包含在一个元素中，您可以控制其中的所有内容。更容易调试，更容易推理（元素之间的关系是显而易见的），并且您的CSS可以专门针对嵌套在类div的框内的overlay。

Answer 2

你在寻找这样的东西吗？

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