css写出景深 |超出省略css

景深效果是指在摄影、绘画以及影视等领域中，将某个焦点与背景的距离产生不同深度感的视觉效果，这种效果可以通过CSS中的z-index属性来实现。

.main {
position: relative;
z-index: 2;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

代码中首先给需要营造景深效果的元素设置 position 属性为 relative，以便在后面 absolute 定位时以该元素为参考点。

接着，需要设置两个元素的 z-index 属性，前景元素（.main）的 z-index 值应该大于背景元素（.background），以保证前景元素始终处于背景元素之上，从而产生景深效果。

最后，设置背景元素的 position 属性为 absolute，并设置 top 和 left 两个属性为 0，使其相对于父元素（即 body 元素）左上角定位。

通过以上的操作，就可以营造出具备景深效果的网页设计。