在一些網站的登入頁面上,經常可以發現,一張圖片疊加在另一張圖片上,底層的圖片若隱若現,利用css中的透明屬性opacity可以實現這種效果,下面就簡單介紹一下怎麼寫程式碼
操作方法
新建一個HTML檔案,下載兩張圖片,如下圖,放在一個資料夾中,避免出現路徑問題
程式碼示例如下,主要利用css偽元素::before,F_box為前置層,浮於背景上方
下面簡單分解下程式碼,分為1,2,3,第一部分,設定背景圖片001.jpg;第三部分,固定前置層圖片002.jpg的位置;第二部分,利用偽元素::before,設定屬性opacity來調節透明度,取值為0-1,0是全透明,即看不見的效果,1是全不透明
程式碼示例中,設定opacity為0.5,半透明狀態,實際頁面效果如下