1

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

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

4

4 回答 4

7

抱歉给您添麻烦了。一定喜欢 CSS 对吧？无论如何，我有两个解决方案给你：一个只是停留在使用背景定位的范围内并实现它......对于大多数部分；另一个超出了直接解决方案，只增加了一点点，但坚如磐石，可以在任何高度上工作。两者都适用于任何宽度。

所以第一个：

这通过将xposbackground-position的关键字值center和 ypos 的百分比值1000%设置为有效。当然，% 值可能会有所不同，但为了安全起见，我只是选择了 1000%。实际上，您可以将其放大到足以将其推离屏幕。但这是小提琴：

http://jsfiddle.net/D5QME/

这个问题是，如果您将父元素的高度设置为背景图像的确切高度......它就会停止工作。如果父元素的高度缩小到低于图像的高度，它就会反转模式。因此，如果您确信父元素将始终高于 BG 图像，那么这是非常可靠的。

现在是第二个：

这个是直截了当的坚如磐石，但增加了一个额外的元素。这个额外的元素可以是占位符元素，如 adiv或其他，或者只是直线img本身。这：

1) 在父级上使用position: relativeandoverflow: hidden将其变成一个容器

2) 使用position: relative、margin: 0 auto和top: 100%将图像定位在中心并将其推到父级下方

3) 并用于当用户越过父元素时.parent:hover .backgroundImage使图像过渡到。top: 0%hover

这是小提琴：

http://jsfiddle.net/Fwf6p/

尽管这增加了一个额外的元素，但它非常坚如磐石。

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

-J科尔莫里森

于 2012-08-09T02:07:22.583 回答
2

J Cole 回答的另一个修改，但似乎适用于 body 标签。也可以与Hephistocles 修改一起使用，但尚未测试。

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

于 2012-08-15T15:41:58.710 回答
1

为了让 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;  
}
于 2012-08-10T18:13:27.780 回答
0

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

刚才在另一个答案中有一个出色的JSFiddle，但它已被删除:(

于 2012-07-11T20:05:16.717 回答