html - CSS中的多背景定位

标签 html css background-image parallax

我正在尝试做这个有趣的简历网站,但我被背景本身困住了。我总共有 3 个背景:一张有山和一些天空的图片,另一张只剪掉了山的图片,中间藏着一个漂亮的小复活节彩蛋。我让前层和后层都可以滚动,中间层是固定的,所以当用户向下滚动时,小鸡巴就藏在山后面了。
但问题是,即使我在将它保存为图像之前在 Photoshop 中手动定位它,dickbutt 图像也无法正确定位。所以我使用背景位置工具将其设置正确,现在一切正常,除了,它只是针对特定的浏览器大小。在移动 View 中,不仅背景没有以山峰为中心,而且 dickbutt 的位置也偏离得很远。

TL;DR:我想相对于其他背景之一定位我的多个背景之一,但它是相对于视口(viewport)定位的。我应该怎么办?

这是我的代码: (github link)
我希望页面看起来像这样:An unmissable reference, but still hiding the NSFW part!

最佳答案

无法根据其他背景定位图像。但是您可以使用具有多个背景的多个 div 来完成您的任务,并使用绝对位置和 z-index 安排它们

关于html - CSS中的多背景定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52951431/

相关文章:

html - 使用 Bootstrap 的具有流体背景的两列页脚

jquery - 在 Joomla 中使用 jQuery 显示子菜单

python - 使用带有 GAE 和 Jinja2 的 WTForms,当字段无效时如何获得红色边框?

html - CSS:选择中的背景图像在 React 中不起作用

html - 裁剪图像设置为背景而不拉伸(stretch)

javascript - 如何在 querySelector 的帮助下更改背景图像

javascript - Angular : Dropdown menu closes too quickly after input loses focus

javascript - malihu 自定义滚动条将 <div class ='mCSB_draggerRail' ></div> 放在 Electron 上的错误位置

javascript - CSS bootstrap 下拉菜单被父 div 隐藏

css - 如何在不包含所有 CSS 而只包含 @extends 的情况下进行@import