Question

我有一个页面，其内容位于页面的中心，使用margin：auto，我想添加一个以相同方式居中的背景，但因为当我向下滚动时背景没有出现我有使用位置：固定，很好地解决了这个问题。

然而，集中定位与内容相同的方式是一个巨大的挑战，因为玩左：x％和margin-left：-y％是一场噩梦，并且从来没有完全适用于所有屏幕分辨率。

标记很简单：

<div id="main" class="container">   
    <div class="overlay"></div>
    <div id="content"></div> 
</div>

您可以看到网站HERE

我想出的最佳CSS配置是：

.overlay
{
  position: fixed;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 72%;
  margin-left:14%;
  height:100%;
  background: #000;
  opacity: 0.45;
  -moz-opacity: 0.45; /* older Gecko-based browsers */
  filter:alpha(opacity=45); /* For IE6&7 */
}

我尝试了很多组合，但背景总是与内容不同，我希望它保持原样。位置：绝对有余量：除非向下滚动，否则自动完美运行。

上述配置除了“min-width”外，效果很好。如果我能让它在某一点之后停止最小化，这将是完美的。

如果您有解决方案，请提前多多谢谢

Answer 1

您可以使用background-attachment: fixed作为后台，而不是使用空标记进行样式设置。通过这种方式，即使您向下滚动页面，也会看到它。

覆盖的CSS最小宽度，居中固定位置

1 个答案: