如何使用tailwind css添加背景圖像視差滾動效果？
[英]how can i add background image parallax scroll effect using tailwind css?
問題描述
這是我正在處理的代碼示例。 我需要為背景圖像添加視差滾動效果。 我試過 background-attachment: fixed，但這只是一個固定的背景。 我想像通常的視差一樣添加一些變換或縮放效果。
<body>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<div class="bg-image"><!-- this div have background-image set and needs to be parallax -->
<div class="content"> <!-- This is the normal content that needs to be over background image -->
</div>
</div>
<div class="bg-image"><!-- this div have background-image set and needs to be parallax -->
<div class="content"> <!-- This is the normal content that needs to be over background image -->
</div>
</div></body>
1 個解決方案
解決方案1
0 2022-07-05 06:41:06
<body>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<UPDATED>
<div class="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover bg-image"><!-- this div have background-image set and needs to be parallax -->
</div>
<UPDATED content div>
<div class="content"> <!-- This is the normal content that needs to be over background image -->
</div>
<UPDATED>
<div class="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover bg-image"><!-- this div have background-image set and needs to be parallax -->
</div>
<UPDATED content div>
<div class="content"> <!-- This is the normal content that needs to be over background image -->
</div>
如何在css3漸變效果下添加背景圖像的不透明度低
[英]how can i add background-image under css3 gradient effect have low opacity
使用視差滾動時，如何消除 header 和背景圖像之間的白色間隙？
[英]How can I remove the white gap between the header and background image when using parallax scrolling?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.