javascript - 使用 css/javascript 定位背景图像

标签 javascript html css

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

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

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

如何更改 html/css 代码,以便在用户点击第一个图像时,以与背景图像相同的方式显示它?

谢谢!

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

最佳答案

我刚刚意识到你的设计有一些背景图像的滚动位置(这在 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*/
}

关于javascript - 使用 css/javascript 定位背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25760053/

相关文章:

javascript - 通过 javascript 显示和隐藏引导工具提示

javascript - 将 Highchart 导出为 PDF 结果仅需 2 页

html - 来自图像 css 的 div Angular

javascript - 为什么无限循环不抛出错误

javascript - 未捕获的类型错误对象没有方法 'to top scroller'

html - 根据内部 float 元素设置div的大小

javascript - 为什么这个代码是有效的?

javascript - 使用javascript的Strapi日期格式

jquery - 如何在 CSS 中调整 div 框的大小,使文本无论长度如何都居中

html - 如何在同一行给不同的div设置不同的高度