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。应该掩盖它。

这是一个分叉。 Jsfiddle Link

修改：您可以定位元素:before的伪.spotlight并添加以下内容

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

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

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

1 个答案: