gpt4 book ai didi

html - 如何制作双视差效果?

转载 作者:行者123 更新时间:2023-11-27 23:13:49 24 4
gpt4 key购买 nike

对于这个问题,我正在为google文档的“关于”页面的确切示例:https://www.google.com/docs/about/
它的顶部有一个粘性导航栏,下面有一个视差图像和一些div。通过查看w3学校,我成功地制作了视差效果。问题是div仅覆盖了一半的图像,我也希望导航栏覆盖图像(但仍保留在顶部)。这是我可怕的代码:



.parallax{
background-color: yellow;

/* Set a specific height */
height: 325px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.about-section{
background-color: blue;
width: 100%;
height: 500px;
}

<body>
<div style = "border-bottom: 2px #f7f8f9 solid; position: sticky; background-color: blue; height: 50px; width: 100%">


</div> <!-- navbar -->

<div class = "parallax"> </div>

<div class = "about-section"></div>
</body>





因此,基本上我想要一种视差效果,即从两侧缩小视差图像直到只有中间可见为止,并且我还希望导航栏保持在页面顶部(我认为使用粘性)。

最佳答案

因此,为了产生双视差效果,我首先使用position: fixed;固定导航栏,并使用display: inline-block;将about-section设置为嵌入式块。

关于html - 如何制作双视差效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58368867/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com