網頁開發不僅僅是文字和圖片的排列，還需要有不同的疊放方式，以達到更好的效果。CSS的疊放順序是從底部到頂部，越靠近頂部的元素越在上面。下面是幾種經典的圖片疊放方式。

/* 第一種，層疊背景圖片 */
background: url(bg1.jpg) no-repeat center center fixed,
url(bg2.jpg) no-repeat center center fixed,
url(bg3.jpg) no-repeat center center fixed;
/* 第二種，利用定位疊放 */
.container {
position: relative; /* 父級容器設置相對定位 */
}
img {
position: absolute; /* 子元素設置絕對定位 */
top: 0;
left: 0;
z-index: 1; /* 越靠近頂部的元素z-index值越大 */
}
/* 第三種，遮罩效果 */
.container {
position: relative; /* 父級容器設置相對定位 */
}
.mask {
position: absolute; /* 遮罩層絕對定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 設置半透明遮罩 */
z-index: 1; /* 遮罩層z-index值要比下面的圖片大 */
}
img {
position: absolute; /* 圖片設置絕對定位 */
top: 0;
left: 0;
z-index: 2; /* 圖片層z-index值要比遮罩層大 */
}

除了以上三種疊放方式，還可以使用css的transform屬性，對圖片進行一些旋轉、縮放、傾斜等效果，以達到更加出彩的效果。