Question

我的屏幕看起来如下。到目前为止，当有一个http请求时，我一直在隐藏叠加层后面的内容，但我真正想要的是拥有覆盖屏幕......好好覆盖内容而不必隐藏下面的布局，因为它看起来很糟糕。似乎潜在的因素是缺乏一个更好的术语，突破。

因此我的问题是：

如何使用背后的内容创建叠加层覆盖看起来褪色/模糊？这是否意味着由其他人实现手段？我最终会为不看的基础内容感到高兴喜欢它在模态之上（E.G褪色和模糊应该是用少许盐摄取）

警告的话，我绝不是网页设计师，我的CSS技能是＆＃34; hacky＆＃34;至多（但改进，所以我知道我的基本方法），但我想了解为什么我做的不起作用？（至于永远不是一个总的菜鸟）

我创建了一个小型工作样本来证明我的问题。

＆＃13;

.overlay {
  width: 100%;
  height: 100%;
  background: grey;
  border-radius: 5px;
  position: relative;
}
.overlay .overlay-modal {
  line-height: 200px;
  border-radius: 5px;
  z-index: 11;
  margin: 0 auto;
}
.overlay .overlay-modal p {
  background-color: #f1c40f;
  width: 300px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  color: white;
  border-radius: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<br/>
<div class="container-fluid">
  <div class="col-md-2 sidebar well">
    Some Menu
  </div>
  <div class="col-md-6 main">

    <div class="container-fluid overlay">
      <div class="overlay-modal">
        <p><i class="fa fa-gear fa-spin"></i>
        </p>
      </div>

      <div class="row">
        <div class="col-md-12">
          <h3>Employee</h3>
          <p class="well">
            Content
          </p>
          <p  class="well">
            Content
          </p>          
        </div>
      </div>
      
    </div>
  </div>
  <div class="col-md-4 main">
    Other content
  </div>
  <div>

＆＃13;

Answer 1

好的，让我看看，检查一下你是否想要它：

只需在z-index: 1;添加.overlay .overlay-modal p {即可使内容位于叠加层后面。对于模糊效果，您可以添加：

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
 filter: blur(5px);

在.row {上。

引导覆盖（在屏幕子部分）

1 个答案: