Question

我有一个页面背景图像，必须精确对齐才能与帧的背景图像协调（因此它看起来像页面和框架上的相同图像）。 Here is what it looks like（注意植物图像）。

问题是页面背景图像正在显示水平滚动条。我希望当窗口小于框架（#main_frame）时出现水平滚动条，而不是当窗口小于页面背景图像时。

这是（我认为）相关的（SASS）CSS：

#main_frame
  -webkit-border-radius: 25px
  -moz-border-radius: 25px
  border-radius: 25px
  -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.7)
  -moz-box-shadow: 10px 10px 10px 0px #706270
  box-shadow: 10px 10px 10px 0px #706270
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  background-color: white
  border-style: solid
  border-color: black
  border-width: 2px
  width: 950px
  margin: 50px auto
  height: 800px
  background: #fff url(../images/plant_white.jpg) 560px -95px no-repeat

#plantBackgroundHolder
  width: 1200px
  height: 900px
  background: #ffc url(../images/plant_yellow.jpg) 690px -40px no-repeat
  position: absolute
  z-index: -1
  top: 0
  margin-left: -600px
  left: 50%

HTML：

<div id="plantBackgroundHolder">
  <div id="main_frame">
  ...
  </div>
</div>

我很确定#plantBackgroundHolder的宽度会导致水平滚动条出现;但如果我删除它，背景图像就会移动。

背景资料：

The original solution for making a transparent overlay effect
The site with the problem
The repo of the site

任何建议都将不胜感激！

Answer 1

你要在CSS上声明一个高度，你需要移除它，你需要让高度自由流动而不是设置一个固定的高度。以下是我能找到的地方：

body { height: 1000px } // remove height, also width!!!
#plantBackgroundHolder { height: 900px } // remove height

此外，删除您在#main_frame id上设置的边距，并将其设置为类似10px auto 0的内容，以删除您在div底部设置的边距。

另外，从html标记中删除此内容，即表示您正在强制滚动显示在页面上;

html { overflow-y: scroll }

注意：你需要对你的代码进行大量修改，你没有正确地嵌套你的div，你可以用不到你现有的一半来轻松实现同样的效果。

Answer 2

对齐两张图片可能会一直困扰着你。一种方法是使用具有透明背景的单个图像。自IE6（more info）以来，PNG具有Alpha透明度。

将png夹在内容后面的白色背景和内容周围的边框之间。以下是JSFiddle的示例。

/* Container provides (yellow) background behind the image */
#main_frame_container {
    position: relative;

    border-radius: 25px;
    margin: 50px auto;
    width: 300px;
    background-color: yellow;
}

/* Position the "background" image */
#background_image {
    position: absolute;
    right: -10px;
    top: -10px;

    width: 100px;
}
/* Main content over both the (yellow) background and image */
#main_frame {
    position: relative;
    border-radius: 25px;
    border: solid black 2px;
    padding: 20px;
}

body {
    background-color: pink;
}

防止背景图像的水平滚动

2 个答案: