Question

我的网站中有一个#wrap div，其中包含属性{margin：0 auto; }

我的封面图片应该占据全身宽度（超过#wrap）和780px高度。

图像不会从左侧的绝对点0开始，因为#cover div位于居中的#wrap div内。

如何解决此问题？

我的HTML：

Activity

我的CSS：

<div id="wrap">

    <div id="cover"></div>

</div>

Answer 1

如果您想让背景位置来自x = 0和y = 0，则需要设置background-position: top left而不是center。使用background-size: cover，您告诉背景应该覆盖所有div，所以在左侧位置，您可以从右侧和底部松开部件。

解决方案：

#cover {
    background-position: top left; 
}

Answer 2

目前还不清楚你想要实现的目标。根据您的问题描述，它听起来像您想要一个固定的全宽背景。有很多方法可以实现这一目标。在这种情况下，您应该绝对定位#cover并给它100％的宽度和780px的固定高度。

我在这个示例中使用了百分比，纯粹是因为它在代码段窗口中更适合。我也使#wrap更高，并给它一个半透明的背景颜色，这样你就可以看到#cover背景的固定性质。

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}
#wrap {
  width: 80%;
  height: 120%;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
#cover {
  background-image: url(https://placekitten.com/300/300);
  background-attachment: fixed;
  background-clip: border-box;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 78%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

＆＃13;

<div id="wrap">
<div id="cover"></div>
  Lorem ipsum sed diam eget risus varius blandit sit amet non magna.
</div>

＆＃13;

FYI。为了代码清晰起见，您不应将#cover元素放在#wrap内，除非您希望/期望它以某种方式受其约束。在您的情况下，#cover和#wrap元素在位置上无关，因为#cover应该是整个页面的背景而不仅仅是#wrap。为了清楚起见，我将其移出去，但无论如何修复都是一样的。

背景图像超过#wrap div

2 个答案: