Question

我真的很喜欢html / css / javascript，我需要一些我试图设计的网站的帮助。

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

它是一个整页背景网站，背景图片是响应式的。问题是当用户点击＆＃34;照片＆＃34;链接，然后在＆＃39; 1＆＃39;：在新背景未定位为原始背景图像时显示在屏幕上的图像，以及页面高度增加（用户现在可以向下滚动）

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

谢谢！

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

Answer 1

我刚刚意识到你的设计有一些背景图像的滚动位置（在Firefox中看起来不错但在chrome中看起来不错）

解决问题：

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

我发现的另一个问题是你的div为background，所以在#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更改背景图片网址。例如，使用jQuery，这应该类似于：

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

希望它有所帮助。

Answer 3

就像Halbano所说，问题是<div id="background">和<div id="background-image">

您可以通过执行以下操作来修复它：

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

在Background div。

处执行此操作

突然之间，图像会稍微下降，但这只是用css修复的。此外，还会弹出一个带按钮的菜单。很显然，manu已经存在，但我无法在Chrome中看到它。

祝你好运

使用css / javascript定位背景图像

3 个答案: