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

來源:酷知科普網 3.02W

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

操作方法

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

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

程式碼示例如下,主要利用css偽元素::before,F_box為前置層,浮於背景上方

css透明度,css圖片透明度設定方法 第2張

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

css透明度,css圖片透明度設定方法 第3張

程式碼示例中,設定opacity為0.5,半透明狀態,實際頁面效果如下

css透明度,css圖片透明度設定方法 第4張
熱門標籤