我想在 IMAGE 懸停上放置 #323232 的漸變顏色（頂部為 0%，底部為 90%），但我只更改了它的背景。我試圖改變不透明度并改變顏色，但它仍然是純色而不是漸變。
這是我的代碼
<Layout>
<Container>
<div className="grid grid-cols-3 px-{100}">
{gallery.map((el, i) => {
return (
<img className="transition duration-500 transition-all hover:bg-primary-hover hover:opacity-10 delay-100" src={gallery[i].imgSrc} />
)
})}
</div>
</Container>
</Layout>
這就是我想要的樣子： 點擊這里
uj5u.com熱心網友回復：
您可以通過在影像下方放置一個 div 并將漸變應用到該 div 來添加影像懸停，然后在懸停影像時，您可以更改影像的不透明度。
我已經設定了黑白顏色，但是您使用您選擇的顏色。
下面是代碼，
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative mix-blend-overlay">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="BannerImage" class="absolute h-[70vh] lg:h-[80vh] w-full object-cover object-right hover:opacity-50 " />
<div class="absolute -z-10 bg-gradient-to-t from-white via-gray-900 to-black h-[70vh] lg:h-[80vh] w-full" />
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497479.html
上一篇：創建父節點快照并通過FileChooser.showSaveDialog()Java保存后未創建png檔案
下一篇：單擊按鈕時顫動會改變顏色