css 两个图片交叉 |css给图片添加蒙版

.cross-image {
position: relative;
}
.cross-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cross-image img:nth-child(1) {
z-index: 2;
transform: rotate(10deg);
}
.cross-image img:nth-child(2) {
z-index: 1;
transform: rotate(-10deg);
}

让大家来看看上面这段代码。首先，大家定义了一个父元素，类名为”cross-image”，它的位置属性必须是相对的，这样它内部的绝对定位的图片才会相对于它来定位。

接着，大家为内部的两个图片设置了绝对位置，并且用”transform”属性来旋转它们。重点是，其中一个图片的z-index为2，另一个图片的z-index为1。这样，第一个图片就会展现在第二个图片的上面，从而实现两个图片交叉的效果。

好了，通过这个效果的实现，说明了CSS在布局方面的强大，同时也启示大家要多动动脑筋、想出更多有趣的布局方式。