Question

在下面的小提琴中，我成功地将聚光灯保持在同一位置（水平居中），除非我的缩放系数太大。换句话说，当我放大我的聚光灯时，它不会停留在水平视口的中心。

请注意使用 .spotlight-2:before 填充视口上阴影的左侧部分。这就是我需要防止出现非阴影区域的原因。

如何让聚光灯水平居中并在浏览器中放大时不向右移动？

小提琴

产生的结果

https://jsfiddle.net/u0onf23y/embedded/result/

CSS

td .div{
  height: 400px;
}

.extend-full {
  padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px; }

    .spotlight-2{
        top: 0px;
        margin-left:-80px;
        float: left;
        display: block;
        background: radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -moz-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -webkit-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -o-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        margin-left: 0px;
        height: 100%;
        position: fixed;
        width: 100%;
        min-width: 100vw;
        min-height: 100vh;
        z-index: 10;
      };
      position: absolute;
      width: 100%;
      z-index: 10; }

    .account-settings-confirm-container-overlay {
      z-index: 10;
      background-color: white !important;
      height: 99px;
      position: absolute;
      margin-top: 10px;
      width: 250px;
      font-size: 12px;
      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); }
    .spotlight-2:before {
      content: "";
      position: absolute;
      display: block;   
      left: -100%;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.5);  
    }

Answer 1

尝试使用flexbox。请参阅示例fullpage http://codepen.io/rhroyston/full/qadGgd/

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}

#viewport{
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  
} 

.a{
  box-shadow: 0px 0px 5px grey inset;
    margin: auto;
    padding: 20px;
    background-color: #fefefe;
    border-radius: 50%;
}

＆＃13;

<div id="viewport">
  <div class="box">
    <div class="a"></div>
  </div>
</div>

＆＃13;

无论变焦如何，如何使聚光灯/阴影位置保持完全相同的相对水平中心位置？

1 个答案: