使用 css/javascript 定位背景图像

Question

我真的是 html/css/javascript 的新手，我需要一些关于我正在尝试设计的网站的帮助。

我的网址是这个：http://www.wideconcept.com/test2/test.html

这是一个全页背景网站，背景图片是响应式的。问题是当用户单击“照片”链接，然后单击“1”时：作为新背景显示在屏幕上的图像未定位为原始背景图像，并且页面高度增加（用户现在可以向下滚动）。

如何更改 html/css 代码，以便在用户单击第一张图片时，以与背景图片相同的方式显示它？

谢谢！

编辑-更具体地说：我的主要问题是，当我单击第一张照片链接时，图像的显示位置和尺寸与原始背景图像不同，即使其 css 属性相同作为原始背景 css 属性。

Answer 1

我刚刚意识到你的设计有一些背景图像的滚动位置（这在 Firefox 中似乎很好，但在 chrome 中却不行）

解决问题：

img { //line no. 375
    display: block;
    height: 1px;/*this fixes your bug*/
}

我发现的另一个问题是你的 id 为 background 的 div，所以在#background 中添加以下规则：

#background {
z-index: 1; /* to fix the layer bug*/
}

Answer 2

我认为你可以这样定义主要背景：

body{

 overflow: hidden;
 position: absolute;
 min-height: 100%;
 width: 100%;
 height: auto;
 top: 0;
 left: 0;
 background: url(assets/bg100.jpg) no-repeat center center;
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;

 #Add the browser prefixed CSS:

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 #And
 background-size: cover;

}

然后当用户单击照片按钮时，通过 jQuery/javascript 更改背景图像 url。 例如，使用 jQuery 这应该类似于：

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

希望对你有帮助。

Answer 3

正如哈尔巴诺所说，问题出在<div id="background"> 和<div id="background-image">

您可以通过以下方式修复它：

<div id="background background-image"></div>

在Background div 上执行此操作。

图像会突然下降一点，但这只是用 css 修复的。还会弹出一个带有按钮的菜单。显然 manu 已经在那里了，但我在 Chrome 中看不到它。

祝你好运