在網(wǎng)頁(yè)設(shè)計(jì)中，美觀的圖片是不可或缺的。在使用CSS樣式表時(shí)，我們可以使用background-image屬性對(duì)層進(jìn)行背景圖片設(shè)置，來(lái)實(shí)現(xiàn)圖片的展示。

/* CSS樣式表 */
.layer {
background-image: url("image.jpg");
background-size: cover;
width: 500px;
height: 300px;
}

在上面的代碼中，我們?cè)O(shè)置了一個(gè)類(lèi)名為“l(fā)ayer”的層，將背景圖片設(shè)置為“image.jpg”，并將背景大小設(shè)置為封面，達(dá)到完全覆蓋層的目的。同時(shí)設(shè)置了層的寬度和高度，以保證圖片在層上的尺寸。

如果我們想讓圖片不完全覆蓋層，而是留有一部分空白區(qū)域，我們可以使用background-position屬性。

/* CSS樣式表 */
.layer {
background-image: url("image.jpg");
background-size: cover;
background-position: center top;
width: 500px;
height: 300px;
}

在上面的代碼中，我們將背景圖片的位置設(shè)置為居中頂部，也就是讓圖片在層的頂部留有一定的空白區(qū)域。

除了使用背景圖片，我們也可以直接在層中插入標(biāo)簽來(lái)展示圖片。在這種情況下，我們可以使用position屬性將圖片定位到層的相應(yīng)位置。

/* CSS樣式表 */
.layer {
position: relative;
width: 500px;
height: 300px;
}
.layer img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

在上面的代碼中，我們將層設(shè)為相對(duì)定位，以便讓內(nèi)部元素相對(duì)于該層進(jìn)行絕對(duì)定位。而圖片我們則設(shè)置為絕對(duì)定位，并將其位置設(shè)置為居中。通過(guò)transform屬性，我們可以將圖片的位置調(diào)整為居中的完美狀態(tài)。

當(dāng)然，這只是一些CSS中添加圖片的基本技能。在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，我們可以選擇多種多樣的方法，利用CSS中強(qiáng)大的特性來(lái)實(shí)現(xiàn)各種炫酷的圖片展示效果。