如果你想要让图片在显示时只显示一半,你可以使用 CSS 的 clip 属性来实现这个效果。
.half-image {
clip: rect(0px, 50%, auto, 0px);
}
上述代码中,rect() 函数的两个参数分别为 top 和 right 的值,用来控制需要截取的图像的位置。我们将 right 的值设置为 50% ,即从图像的中央开始截取,只显示图像的左半部分。
在使用 clip 属性时,需要注意以下几点:
- 只有绝对定位的元素才能使用 clip 属性
- 剪裁的形状是矩形
- rect() 函数中的参数可以是长度、百分比或键字(auto)
如果你想让图片显示成对称的两半,可以将 clip 属性的值改为:
.half-image {
clip: rect(0px, 50%, auto, 50%);
}
这样就会同时显示图片的左右两个部分。