我正在制作“視差”效果，但不起作用
[英]I'm making a "parallax" effect but it doesn't work
問題描述
我對HTML和CSS有點陌生，正在構建一個網站，但我似乎無法在我的圖像上創建視差效果...只是沒有顯示圖像。 你能看出我的（簡化的）代碼有什么問題嗎？
.parallax { background-image: url("images/start-background.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <link href="./style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="parallax"></div> <h1 class="title-home">This is my title</h1> <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2> <div class="parallax"></div> </body> </html>
1 個解決方案
解決方案1
0 2020-02-17 17:38:40
你應該設置一個min-height 。我在這里做了 500px 但你可以改變。
.parallax { /* The image used */ background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
<!DOCTYPE html> <html> <head> <link href="./style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="parallax"></div> <h1 class="title-home">This is my title</h1> <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2> <div class="parallax"></div> </body> </html>
我正在嘗試在滾動上產生視差效果，但為了使項目向相反方向移動
[英]I'm trying to make parallax effect on scroll but for the items to move the opposite way
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.