如何在 div 顶部覆盖透明颜色并将加载...文本定位在 div 的绝对中心？答案

【问题标题】：How do I overlay a transparent color on top of a div and position loading... text in the absolute center of the div?如何在 div 顶部覆盖透明颜色并将加载...文本定位在 div 的绝对中心？
【发布时间】：2017-08-22 14:46:20
【问题描述】：

<div class="square loading"></div>

square {
  height: 200px;
  width: 200px;
  margin: 0px auto;
}

loading {
  ...
}

我正在尝试：

在 div 顶部覆盖黑色，透明度为 50%（因此背景仍然可见）。
将Loading...文本放在div的绝对中心。

如何使用纯 CSS 实现这一目标？

【问题讨论】：

标签： css

【解决方案1】：

display flex 是你的朋友

.square {
  height: 200px;
  width: 200px;
  margin: 0px auto;
  background-color: yellow;
  position: relative;
}

.loading:after {
   content: '...loading';
   position: absolute;
   top:0;
   bottom: 0;
   right: 0;
   left: 0;
   background: rgba(0,0,0,.5);
   display: flex;
   justify-content: center;
   align-items: center;
}

&lt;div class='loading square'&gt;&lt;/div&gt;

【讨论】：

太完美了，辛格。非常感谢！

【解决方案2】：

希望对你有所帮助..

.square {
  height: 200px;
  width: 200px;
  margin: 0px auto;
  background: rgba(0,0,0,.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="square">
  <div class="loading">Loading...</div>
</div>

【讨论】：

谢谢，但我正在寻找纯 CSS。

【解决方案3】：

使用此代码。

.square {
  height: 200px;
  width: 200px;
  margin: 0px auto;
  background:rgba(0,0,0,0.5);
  position:relative;
}
.square::after {
  color: #fff;
  content: "loading...";
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

&lt;div class="square loading"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

.container {
  display: flex;
  height: 200px;
  width: 200px;
  position: relative;
  border: 1px solid: #ddd;
  padding: 10px;
}
.loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 127, 127, 0.6);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}
.loader.active {
  opacity: 1;
  z-index: 1;
}

<div class="container">
  <div class="loader active">Loading</div>
  <div class="content">Hai</div>  
</div>

在这个 sn-p 中，您可以看到 loader div。您可以通过切换类active 来切换其模式ON/OFF。此外，加载器中的内容（现在是Loading）div 将始终位于中心。无论内容及其宽度或高度是什么。因为这里使用了flexbox。

此外，可以通过更改loader 的背景来更改叠加层。

【讨论】：

【解决方案5】：

这是一个带有内容的div 和一个带有类覆盖的div。你可以这样试试。

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0px auto;
  background: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet nisl vel eros pulvinar, eu ultrices lorem interdum. Donec maximus massa ullamcorper est egestas faucibus et ac ligula. </p>
  <div class="overlay">Loading...</div>
</div>

【讨论】：