頁(yè)面掛圖，是指在網(wǎng)頁(yè)中插入圖像，并且讓圖像能夠浮現(xiàn)在文字上方的一種效果。通常這么做都是為了強(qiáng)化網(wǎng)頁(yè)的視覺(jué)效果，增加讀者閱讀的趣味性。

那么，如何實(shí)現(xiàn)這種效果呢？其實(shí)，實(shí)現(xiàn)頁(yè)面掛圖，使用CSS是最簡(jiǎn)單、最有效的方法之一。

.guatu {
position: relative;
display:inline-block;
}
.guatu img {
position: absolute;
top: -10px;
left: -10px;
opacity: 0.8;
border: 5px solid #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.guatu p {
padding:10px;
}

這段代碼的意思是，首先要給掛圖的div設(shè)置一個(gè)相對(duì)的位置，然后把圖片的位置設(shè)置成絕對(duì)定位，在文本框內(nèi)調(diào)整圖片位置，使其浮在上方。再通過(guò)設(shè)置透明度、邊框和陰影等屬性，增強(qiáng)圖片視覺(jué)效果。最后，記得在p標(biāo)簽中添加padding值，以防文本與圖片重疊。

有了這些基本的CSS設(shè)置，你便可以輕松地實(shí)現(xiàn)想要的頁(yè)面掛圖效果了。