css透明度，css圖片透明度設定方法

在一些網站的登入頁面上，經常可以發現，一張圖片疊加在另一張圖片上，底層的圖片若隱若現，利用css中的透明屬性opacity可以實現這種效果，下面就簡單介紹一下怎麼寫代碼

操作方法

新建一個HTML檔案，下載兩張圖片，如下圖，放在一個檔案夾中，避免出現路徑問題

代碼示例如下，主要利用css僞元素::before，F_box爲前置層，浮於背景上方

下面簡單分解下代碼，分爲1，2，3，第一部分，設定背景圖片001.jpg；第三部分，固定前置層圖片002.jpg的位置；第二部分，利用僞元素：：before，設定屬性opacity來調節透明度，取值爲0-1，0是全透明，即看不見的效果，1是全不透明

代碼示例中，設定opacity爲0.5，半透明狀態，實際頁面效果如下