由於我自己開發的命理服務產品，有大量使用漸層效果渲染前端，為求美麗的頁面呈現，加上是自己自學前端工程，所以卡了這個問題有一段時間，後來解決了，撰寫一篇文章分享給需要的其他工程師小夥伴們。
需求介紹
再正式進入解法之前，先上圖解釋。
這個頁面是其中一頁我自己開發的產品頁面，圖中的金邊框框，我使用了漸層效果來展示毛玻璃微透明感，這還不是最終完成的樣子。
以下是我的CSS和html
<div className='h-32 w-32 rounded-[20px]'>
<div className='h-32 w-32 rounded-[20px] border square'>
</div>
</div>
.square {
border-color: #EACB84;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
}
那在這個命理服務中，使用者需要根據他本身的需求選擇牌陣，所以我希望當使用者選取該牌陣時，給予一個特效，如下：
剛開始，我就想著這還不簡單，使用 hover 然後change background的顏色就好，但卻行不通，沒有任何反應。
卡這個問題，卡了一段時間，後來找了很多文章後，才找到根源，以下是我的解法。
解法
由於我是自學前端，學習的方式很粗糙，就是直接做專案，沒有一個有系統地學習方式，沒有使用教學課程的習慣，因為我不太喜歡看影片，有可能在某個教學課程中有提到，但我渾然不知。
以下是我後來查到的原因：
使用linear-gradient漸層效果顏色的優先度比其他單純的顏色還高，所以單純用hover或者單純在寫一個css改變backgound-color是行不通的。
後來我查網站的解法是用 overlay + absolute的方式解決，在原先使用漸層效果的div前新加一個overlay的div，把原本的漸層背景蓋掉。
不過如果有其他前端大神有更好的解法，歡迎分享給我，我會更新文章。
於是，我在我原先的square div前加一個overlay，偵測只要該div被選取，就新增一個overlay div，然後再製作一個overlay的css，我們來看code
<!-- 記得要加relative，因為overlay會是使用absolute去疊在這個div上，蓋掉原本的背景顏色 -->
<div className='relative h-32 w-32 rounded-[20px]'>
<!-- 因為我是用React.js 開發，所以這麼寫等同於當這個div被選取時，前面自動加一個overlay的div改掉原本的顏色-->
<!-- 你可以根據你使用的框架或Javascript來改，總之就是一有點取的動作，就新增這個overlay的div -->
{selectedDiv === square.id && <div className="overlay"></div>}
<div className='h-32 w-32 rounded-[20px] border square'>
</div>
</div>
.overlay {
/* position 是absolute，直接在最上層蓋掉原本的背景顏色 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
background-color: rgba(234, 203, 132);
opacity: 0.4;
}
如此一來，就能實現以下的效果：
以上就是這次開發產品時遇到的前端問題，我不知道有沒有其他更好的解法，所以如果有工程師夥伴們有任何想法，歡迎在下面的留言區點開留言，或者寄信給我，我會把其他解法更新在文章上，造福更多工程師們。
感謝收看！
