Question

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

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

loading {
  ...
}

我试图：

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

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

Answer 1

display flex是你的朋友

＆＃13;

<serviceCertificate storeLocation="LocalMachine" storeName="My" x509FindType="FindByThumbprint" findValue="..." />

＆＃13;

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

＆＃13;

Answer 2

希望这会对你有帮助..

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用此代码。

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

在此代码段中，您可以看到loader div。您可以通过切换班级ON/OFF切换其模式active。此外，加载器中的内容（现在它是Loading）div将始终位于中心。无论内容及其宽度或高度如何。因为此处使用flexbox。

此外，可以通过更改loader。

的背景来更改叠加层

Answer 5

以下是包含内容的div和包含类重叠的div。你可以这样试试。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在div的顶部覆盖透明颜色并在div的绝对中心放置加载...文本？

5 个答案: