如何為背景圖片增加透明度 [css]

在寫 ooxx 時面臨了一個問題：我想要讓獲勝的格子產生變透明的動畫(雖然這篇不會講到動畫)

最直接的想法當然就是加上透明度啦，但是當直接加上opacity = 0.3時，就變成這樣

連框框也一起變得透明了💦

雖然因為我是使用背景，這是理所當然的結果，而這時候其實只要簡單地加上新的元素在裡面就行了，但就是想要只使用一層div👀，有沒有甚麼好方法呢？

這時幫上忙的就是... pseudo elements 🌸

從原本的

改成


就成功了🌸

要記得設定 display:inline-block，一直弄不好，後來才發現就是沒有正確的display設定

完整專案可以在 https://github.com/cuteapple/web-items/tree/master/ooxx 找到，有任何疑問也歡迎提出。

* 其實也可以直接使用<img>取代<div>，但是操作時就沒有辦法只改動data attribute了
** 如果要加入文字之類的內容，請加上以下的css，讓背景不要跑走