Question

我想使用CSS将背景图像的顶部与元素的底部对齐（这样我可以在悬停或动画时将其设为transition，以防您想知道）。此元素没有设定高度;我不知道元素的高度是多少。有人知道怎么做这个吗？解决方案不必与IE兼容;它只需要在最新版本的Chrome和Firefox中使用。

编辑：如果在赏金结束时有这样的答案，我会将赏金奖励给也适用于<body>元素的答案。

Answer 1

抱歉这个问题。要爱CSS吗？无论如何，我有两个解决方案：一个只是停留在使用背景定位的领域并实现它......对于MOST部分;另一个超出了直接的解决方案，只增加了一点额外，但是坚如磐石并且可以在任何高度上工作。两者都适用于任何宽度。

所以第一个：

这可以通过将background-position设置为xpos的关键字值center和ypos的百分比值1000%来实现。当然％的价值可能会有所不同，但我只追求1000％才能安全。实际上你可以把它做得足够大，可以将它推离屏幕。但这是小提琴：

http://jsfiddle.net/D5QME/

这个问题是，如果你让父元素的高度成为背景图像的确切高度......它就会退出工作。如果父元素的高度收缩到图像的高度以下，它会反转模式。因此，如果您确信父元素总是比BG图像更高，那么这非常可靠。

现在是第二个：

这个是直立的坚如磐石，但增加了额外的元素。这个额外元素可以是占位符元素，如div或其他任何元素，或者只是直接img本身。这样：

1）在父级上使用position: relative和overflow: hidden将其转换为容器

2）使用position: relative，margin: 0 auto和top: 100%将图片放在中间位置并将其推到父母的正下方

3）并使用.parent:hover .backgroundImage在用户top: 0%超过父元素时将图片转换为hover。

这是小提琴：

http://jsfiddle.net/Fwf6p/

尽管这会增加额外的元素，但它非常稳固。

无论如何，希望这会有所帮助！

-J Cole Morrison

Answer 2

J Cole's answer的另一个修改，但似乎与body标签一起使用。也可以与Hephistocles modification合作，但尚未对此进行测试。

CSS：

.example{
    border: 1px solid red;
/* Change the height to anything you want! */       
    height: 400px;
/* Change the width to anything you want! */
    width: 500px;
    position: relative;
}

.example:hover .backgroundImage{
    height: inherit;
    top: 0%;
}

.backgroundImage{
    background: url("http://img.gadgetian.com/Angry-Birds-Space-021-300x300.png") no-repeat top center;
    position:relative;
    margin: 0 auto;
    top: 100%;
    -webkit-transition: 1s ease all;
    -moz-transition: 1s ease all;
    transition: 1s ease all;
    height: 0px;    
}

HTML：

<body class="example">
    <div class="backgroundImage"></div>
</body>

JSFiddle

Answer 3

进一步考虑J Cole的第二个答案 - 如果你想避免插入额外的元素，你总是可以使用伪元素。例如：

.myElm {
    position: relative;
    overflow: hidden;
}
.myElm:after{
    content:"";
    background: url("myimage.png") no-repeat top left;
    top:100%;
    position: absolute;
}
.myElm:hover:after {
    top:0;  
}

Answer 4

如果您知道元素的高度（以像素为单位），则可以将其背景位置设置为：background-position:0 npx;。不确定否则。如果有最大高度，你可以随时使用它。或者有合理的估计/限制。然而，过渡可能不会非常均匀地“缓解”。

刚刚在另一个答案中有一个很好的JSFiddle，但它已被删除：（

使用CSS将背景顶部与元素底部对齐

4 个答案: