在一些網(wǎng)站的登錄頁(yè)面上，經(jīng)?？梢园l(fā)現(xiàn)，一張圖片疊加在另一張圖片上，底層的圖片若隱若現(xiàn)，利用css中的透明屬性opacity可以實(shí)現(xiàn)這種效果，下面就簡(jiǎn)單介紹一下怎么寫(xiě)代碼

操作方法

• 01

  新建一個(gè)HTML文件，下載兩張圖片，如下圖，放在一個(gè)文件夾中，避免出現(xiàn)路徑問(wèn)題

  
• 02

  代碼示例如下，主要利用css偽元素::before，F(xiàn)_box為前置層，浮于背景上方

  
• 03

  下面簡(jiǎn)單分解下代碼，分為1，2，3，第一部分，設(shè)置背景圖片001.jpg；第三部分，固定前置層圖片002.jpg的位置；第二部分，利用偽元素：：before，設(shè)置屬性opacity來(lái)調(diào)節(jié)透明度，取值為0-1，0是全透明，即看不見(jiàn)的效果，1是全不透明

  
• 04

  代碼示例中，設(shè)置opacity為0.5，半透明狀態(tài)，實(shí)際頁(yè)面效果如下

  

聲明：本篇經(jīng)驗(yàn)系酷知網(wǎng)「www.coozhi.com」原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。