使用 HTML5 設置圖片疊加

使用 HTML5 可以很容易地為圖片添加疊加效果。下面是一些常用的方法：

設置圖片透明度

通過 CSS 中的 opacity 屬性可以設置圖片的透明度，從而讓兩張圖片疊加在一起。例如：

img{
opacity:0.5;
}

此時兩張圖片就會疊加在一起。

使用多重背景

使用 CSS3 中的多重背景可以在一個元素上放置多個背景圖像。如下代碼所示：

.bg{
background-image: url('bg1.jpg'), url('bg2.jpg');
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: cover, cover;
}

上面的代碼將 bg1.jpg 和 bg2.jpg 兩張圖片疊加在一起。

使用混合模式

混合模式可以讓兩張圖片的顏色混合在一起。比如將兩張圖片的混合模式設置為 lighten，代碼如下：

img{
mix-blend-mode: lighten;
}

這樣兩張圖片的顏色就會混合在一起了。