我想使用CSS将背景图像的顶部与元素的底部对齐(这样我就可以transition在悬停或动画中进行渲染,以防您想知道).此元素没有设定高度; 我不知道元素的高度是多少.有人知道怎么做这个吗？解决方案不必与IE兼容; 它只需要在最新版本的Chrome和Firefox中使用.
编辑:<body>如果在赏金结束时有这样的答案,我会将赏金奖励给也适用于该元素的答案.
小智 7
抱歉有问题.要爱CSS吗？无论如何,我有两个解决方案:一个只是停留在使用背景定位的领域并实现它......对于MOST部分; 另一个超出了直接的解决方案,只增加了一点额外,但是坚如磐石并且可以在任何高度上工作.两者都适用于任何宽度.
所以第一个:
这可以通过设置xpos background-position的关键字值center和1000%ypos 的百分比值来实现.当然%的价值可能会有所不同,但我只追求1000%才能安全.实际上你可以把它做得足够大,可以将它推离屏幕.但这是小提琴:
这个的问题是,如果你让父元素的高度成为背景图像的确切高度......它就会退出工作.如果父元素的高度收缩到图像的高度以下,它会反转模式.因此,如果您确信父元素将始终高于BG图像,那么这非常可靠.
现在第二个:
这个是直立的坚如磐石,但增加了一个额外的元素.这个额外的元素可以是占位符元素,如a div或者其他,或者只是直线img本身.这个:
1)使用position: relative并overflow: hidden在父级上将其转换为容器
2)使用position: relative,, margin: 0 auto和top: 100%将图像定位在中心并将其推到父母的正下方
3)并用于.parent:hover .backgroundImage使图像转换为top: 0%当用户hover在父元素上时.
这是小提琴:
虽然这增加了一个额外的元素,但它非常稳固.
无论如何,希望这有帮助!
-J Cole Morrison
| 归档时间： |
|
| 查看次数： |
434 次 |
| 最近记录： |