css 如何截取图片的一半

CSS中截取图片的一般通常是通过设置图片的宽度或高度来实现的。下面是一种简单而常用的方法：

img {
       width: 50%;
       height: auto;
}

这个CSS代码块将图片的宽度设置为50%。而高度则设置为自适应，因为我们只改变了宽度，而没有改变高度。

你还可以尝试以下代码，它会让图片像一个圆形那样显示：

img {
       border-radius: 50%;
       overflow: hidden;
}

这个CSS代码块会将图片的边缘变成圆形。通过设置顶部和下部的overflow属性为hidden，可以将图片的上半部分或下半部分隐藏起来。

如果你想只截取图片的上半部分，可以尝试以下代码：

img {
       height: 50%;
       object-fit: cover;
}

这个CSS代码块会将图片的高度设置为50%。object-fit属性用于指定图片的填充方式。通过设置为cover，可以让图片大小和容器一样，并且不扭曲图片。

最后，如果你想在图片的上半部分添加一个遮罩层来提高图片的可读性，可以尝试以下代码：

img {
       position: relative;
}
img::before {
       content: "";
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 50%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 1;
}
    

这个CSS代码块将使用伪元素::before来创建一个半透明的遮罩层。通过设置height属性为50%，可以将遮罩层缩小到图片的上半部分。并设置z-index属性为1，来遮挡在图片上方的其他内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！