當前位置:常識百科館>遊戲數碼>IT技術>

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

IT技術 閲讀(3.08W)

在一些網站的登錄頁面上,經常可以發現,一張圖片疊加在另一張圖片上,底層的圖片若隱若現,利用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張