css透明度,css圖片透明度設置方法
- IT技術
- 關注:2.93W次
在一些網站的登錄頁面上,經常可以發現,一張圖片疊加在另一張圖片上,底層的圖片若隱若現,利用css中的透明屬性opacity可以實現這種效果,下面就簡單介紹一下怎麼寫代碼
操作方法
新建一個HTML文件,下載兩張圖片,如下圖,放在一個文件夾中,避免出現路徑問題
代碼示例如下,主要利用css偽元素::before,F_box為前置層,浮於背景上方
下面簡單分解下代碼,分為1,2,3,第一部分,設置背景圖片001.jpg;第三部分,固定前置層圖片002.jpg的位置;第二部分,利用偽元素::before,設置屬性opacity來調節透明度,取值為0-1,0是全透明,即看不見的效果,1是全不透明
代碼示例中,設置opacity為0.5,半透明狀態,實際頁面效果如下
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/q5mgy.html