網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

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

欄目: IT技術 / 發佈於: / 人氣:2.99W

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