CSS多層圖片常常用于頁面設(shè)計(jì)中，可以實(shí)現(xiàn)圖片重疊、透明度、混合等效果。以下是一些常用的CSS多層圖片技巧。

1.設(shè)置多個背景圖層

background-image: url("image1.gif"), url("image2.gif");
background-position: left top, right bottom;
background-repeat: no-repeat;

上述代碼會設(shè)置兩個背景圖層，分別是左上角的image1.gif和右下角的image2.gif。我們可以通過改變位置和重復(fù)方式來調(diào)整圖層的顯示效果。

2.使用偽類實(shí)現(xiàn)疊層效果

div::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background-image: url("image1.gif");
}

上述代碼中，我們使用div::before偽類來增加一個背景圖層。使用position和z-index屬性可以將圖層置于原圖之下，從而實(shí)現(xiàn)透明度和混合效果。

3.CSS混合模式

background-blend-mode: multiply;

上述代碼可以將兩個圖層進(jìn)行混合，這里的multiply表示混合模式為正片疊底模式，可以產(chǎn)生比較明顯的變化效果。

通過上述技巧的組合，我們可以實(shí)現(xiàn)各種復(fù)雜的多層圖片效果，讓頁面設(shè)計(jì)更加豐富多彩。