Question

我正在尝试在此网站上制作类似内容：http://www.designembraced.com/#/HTC 我需要制作覆盖整个屏幕的背景颜色，然后当我向下滚动时，应该有另一种颜色（或图像）。

我知道如何使用position: fixed;进行此操作，但我无法滚动。我希望你明白我想说的话

Answer 1

如果你看看他们的DOM，他们就不会使用CSS了。他们实际上是用图像元素创建部分。这将导致网站滚动。

<!--HOME-->
<section id="ascensorFloor1" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 0px; top: 0px; overflow-y: auto; overflow-x: hidden;">
<div class="titleScreen">
<div id="welcome">
<img src="IMG/logo.png" alt="Logo" class="logo">
<h1 style="font-size: 200px;">EAT</h1><h1 style="font-size: 200px;">DESIGN</h1><h1 style="font-size: 200px;">SLEEP</h1>
<h2 style="font-size: 15px;">FREELANCE CREATIVE / ART DIRECTOR &amp; DESIGNER - ANTHONY GOODWIN</h2>
<!--<p>Mentions<br><br>
<p class="awards">
[ 1x FWA Site Of The Month ]  -  [ 2 FWA Site Of the Days ]  -  [ 2 FWA Mobile Of The Days ]  -  [ 1 Cannes Lion Awward (Bronze) ]  -  [ 1 AWWARDS Site Of The Day ]
</p-->
</div>
</div>
</section>

<!--HTC-->
<section id="ascensorFloor2" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 1920px; top: 0px; display: block; overflow-y: auto; overflow-x: hidden;">
<div class="coverScreen" style="opacity: 0;"></div>
<div class="titleScreen">
<div class="projectInfo">
<h1 style="font-size: 200px;">HTC</h1>
<h1 style="font-size: 200px;">.COM</h1>
<h2 style="font-size: 15px;">ART DIRECTION / IDEA / DESIGN</h2>
<p>An interactive and innovative solution to search for the perfect HTC phone.<br> Choose a phone that suits you by picking features that you use the most.</p>
<div class="scrollcontainer"><img src="IMG/arrow.png" alt="scroll"></div>
</div>
</div>
<div class="headerImage" style="margin-left: -1280px;"><img src="IMG/htcHeader.jpg" alt="HTC" class="images2"></div>
<div class="projectImage" style="display: block; margin-left: -1280px;"><img src="IMG/HTC.jpg" alt="HTC" class="images" style="width: 2560px;"></div>
</section>


<!--KLM-->
<section id="ascensorFloor3" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 3840px; top: 0px; display: block; overflow-y: auto; overflow-x: hidden;">
<div class="coverScreen" style="opacity: 0;"></div>
<div class="titleScreen">
<div class="projectInfo">
<h1 style="font-size: 200px;">KLM</h1>
<h1 style="font-size: 200px;">SPACE</h1>
<h2 style="font-size: 15px;">DIGITAL IDEA / ART DIRECTION / DESIGN</h2>
<p>An interactive and emersive promotional campaign for KLM "Claim your place in Space".<br>The project was aimed to get users to sign up and pick a place in space for the chance to win a ticket on the first commercial space trip from Curacao.</p>
<div class="scrollcontainer"><img src="IMG/arrow.png" alt="scroll"></div>
</div>
</div>

多种背景颜色

1 个答案: