的背景下，向下滾動CSS

我想知道我怎麼能像這樣用CSS & HTML：的背景下，向下滾動CSS

https://www.vatsim.net

你打開網頁，你會得到一個適合所有瀏覽器中的backrgound，但你滾動下來，你會得到一個純色作爲背景和更多的信息。

我想這一點，但不是我所期待的，我想是在頂部的鏈接，

https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

非常感謝您！

2015-11-29 ctabuyo

我不明白你的問題。飛機的「背景」只是一個div，即使它是頁面背景，您仍然可以擁有覆蓋背景圖像的純色背景的div或其他元素。順便說一下，您鏈接的頁面使用JavaScript。我可以通過上述div的變化'style'屬性來判斷。 – GolezTrol

@GolezTrol，你能給我一個簡單的例子嗎？非常感謝你！ – ctabuyo

我已經添加了答案。 – GolezTrol

您可以通過僅僅增加了CSS的跑遠。在下面的代碼片段中，有兩個div。第一個是與圖像頂部區域。第二個是其餘的內容。

第一個div獲得100vh的高度，使其成爲屏幕高度的100％。背景圖像居中並設置爲縮放，以覆蓋整個div。而且，那基本上就是這樣。沒有腳本需要。

* { /* Just get rid of some whitespace */ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div.image { 
 
    height: 100vh; /* div is 100% of viewport height */ 
 
    background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg); 
 
    background-size: cover; /* Entire div is covered by the image */ 
 
    background-position: center; /* Image is centered relatively to the div. */ 
 
} 
 

 
/* Just some styling to make it visible. */ 
 
div { 
 
    color: white; 
 
    font-size: 150%; 
 
} 
 

 
div.content { 
 
    color: black; 
 
    background-color: #eee; 
 
    height: 2000px; 
 
}

<div class="image">This is the top area. The image exactly covers the view.</div> 
 

 
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>

來源

2015-11-29 12:16:41 GolezTrol

您添加的網頁基本上分爲div，第一個是100％的高度和100％的寬度。因此你可以在你的屏幕上看到他。

其他只是100％寬度但不是100％高度的div，這使您可以將背景顏色從淺灰色切換爲白色，然後切換爲灰色。

不是太複雜，但還沒有一個很好的設計

來源

2015-11-29 12:09:00

的背景下，向下滾動CSS

回答

相關問題