CSS遮照層是前端開(kāi)發(fā)中常用的一種效果，能夠幫助頁(yè)面增加層次感和美觀度。當(dāng)需要在遮照層中插入圖片時(shí)，可以使用以下的方法：

html:
<div class="mask">
<img src="your-image-url" alt="your-image">
</div>
css:
.mask {
position: relative;
}
.mask img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 100%;
max-height: 100%;
}

首先，在HTML中添加一個(gè)遮照層的父元素，這里設(shè)置class為"mask"，并在其中插入圖片的img標(biāo)簽，設(shè)置其src和alt屬性。接著在CSS中，給遮照層.parent元素設(shè)置position: relative;，使圖片元素能夠相對(duì)于父元素進(jìn)行定位。然后，對(duì)圖片元素設(shè)置position: absolute;，使其脫離文檔流，并能夠相對(duì)于父元素進(jìn)行定位。并設(shè)置top: 50%; left: 50%;讓其在父元素中垂直和水平居中。最后，利用transform屬性和translate函數(shù)，將圖片元素向左和上平移自身寬高的50%，使其完全居中。同時(shí)，max-width和max-height也要設(shè)為100%，確保圖片大小能夠自適應(yīng)父元素的大小。