在CSS中，可以使用背景图片或颜色来装饰一个元素的背景。但是有时候，我们需要让子元素的背景全屏展示，这时候该怎么做呢？

其实很简单，只需要使用定位和z-index属性，就可以实现子元素的背景全屏展示。

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('image.jpg') no-repeat center center;
background-size: cover;
z-index: -1;
}

以上是一个简单的例子，父元素设置为relative定位，子元素设置为absolute定位，并将top、left、right、bottom设置为0，这样子元素就会占满整个父元素的空间。然后再给子元素设置背景图片，并将z-index属性设置为负数，这样子元素就会在父元素下方，实现子元素的背景全屏展示。

这个方法也适用于多层嵌套的子元素，只需要将最外层子元素的z-index设置为最小值即可。

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.grandchild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('image.jpg') no-repeat center center;
background-size: cover;
z-index: -2;
}

总之，使用定位和z-index属性可以很轻松地实现子元素的背景全屏展示，为页面的美观度和用户体验增添更多的乐趣。