Html 如何隐藏一组图像的顶部？

我想隐藏所有图像的顶部。我尝试使用

clip

，但这要求图像要么是固定的，要么是绝对的。这组图像是滚动类型的，是否有任何方法隐藏图像的顶部。下面是一个例子

<style>
    #rightCol{
        overflow-x: hidden;

        overflow-y: scroll;
        max-height: 82vh;
    }
   body{
    overflow:hidden;
    }
</style>

<div class="row">
<div class="col-md-9" style="padding:0; border:ridge; " id="rightCol">
<img class="img-responsive" src="<?php echo base_url('assets/images/image_1.jpg') ?>" />
<br>
<img class="img-responsive" src="<?php echo base_url('assets/images/image_2.jpg') ?>" />
<br>
<img class="img-responsive" src="<?php echo base_url('assets/images/image_3.jpg') ?>" />
<br>
<img class="img-responsive" src="<?php echo base_url('assets/images/image_4.jpg') ?>" />
<br>
<img class="img-responsive" src="<?php echo base_url('assets/images/image_5.jpg') ?>" />
<br>
<img class="img-responsive" src="<?php echo base_url('assets/images/image_6.jpg') ?>" />
<br>
</div>
</div>

#rightCol{
溢出x：隐藏；
溢出y：滚动；
最大高度：82vh；
}
身体{
溢出：隐藏；
}
" />


" />


" />


" />


" />


" />

您可以给

.img responsive

一个负的

边距

来切断顶部

为了防止可见的重叠，您可以向

br

元素添加一些css

例如：

#rightCol{
溢出x：隐藏；
溢出y：滚动；
最大高度：82vh；
}
身体{
溢出：隐藏；
}
.img响应{
页边距顶部：-100px；/*调整此值以更改顶部裁剪的数量*/
显示：块；
}
/*充当图像之间的间距*/
.img封面{
位置：相对位置；
内容：''；
背景：白色；
高度：5px；
显示：块；
}

隐藏所有图像的顶部是什么意思？试着提供一些例子这很接近。但是下一张图片是在前一张图片的基础上加上一个5px的小白点