HTML/CSS - 如何在缩小时缩小的 div 左侧填充区域背景？

Question

场景

我想在 css 中创建一个聚光灯，在任何用户缩放级别上固定相对于父 div 的位置。

我想用阴影“填充”整个屏幕，但是当我将阴影应用到整个页面时，我无法让聚光灯响应缩放。

问题

我的 jsfiddle 容器中的左侧部分 (account-settings-confirm-container-left-fill) 没有显示阴影。

到目前为止我做了什么..

<div class="container account-settings-confirm-container-left-fill"> </div>
  <div class="container account-settings-confirm-container">
 <div class="spotlight"></div>
  <div class="account-settings-confirm">
        <div class="row account-settings-confirm-banner extend-full">
          </div>
</div>
</div>

附带我创建的 jsfiddle。

jsFiddle

https://jsfiddle.net/10nmL3vv/

结果(全屏)

https://jsfiddle.net/10nmL3vv/embedded/result/

如何修改我的代码使阴影占据整个页面？

编辑

我尝试对左侧填充进行此修改，但无济于事。

.account-settings-confirm-container-left-fill{
        position: absolute;
        width: auto;
        height: auto;
        background: rgba(0, 0, 0, 0.5);
    }

Answer 1

Bootstrap container 类的最大宽度值为

无、750px、970px、1170px .. 取决于屏幕尺寸。

引用 http://getbootstrap.com/css/#grid-options

您可以将 .container 类更改为 .container-fluid

并删除

margin-left: -55px; 来自 .spotlight 元素。应该覆盖它。

这是一个 fork 。 Jsfiddle Link

编辑:您可以针对元素 .spotlight 的伪 :before 并添加以下内容

.spotlight:before {
  content: "";
  position: absolute;
  display: block;   
  left: -100%;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);  
}

请注意，它将绝对定​​位到 html。 Updated Fiddle