html - CSS:让 "overflow: hidden"隐藏顶部而不是底部？

Question

我正在使用“溢出:隐藏；”图像上的 CSS 属性，但我希望它切断图像的顶部而不是底部。有办法做到这一点吗？

Answer 1

您可以通过以下方式实现:

使用图片标签:

HTML

<div class="img">
    <img src="http://lorempixel.com/600/400/sports/1/" />
</div>

CSS:

.img {
    position:relative;
    width:600px;
    height:300px;
    overflow:hidden;
}
.img img {
    position:absolute;
    bottom:0;
}

使用背景图片

HTML:

<div class="bg"></div>

CSS:

.bg {
    width:600px;
    height:300px;
    background-image:url(http://lorempixel.com/600/400/sports/1/);
    background-size:100%;
    background-position:bottom right;
    background-repeat:no-repeat;
}

演示:http://jsfiddle.net/lotusgodkk/GCu2D/475/