问题在 fiddle 中最明显 JsFiddle
图片叠加设置为margin-top:-100%;但它不适用于长度超过 300x300 的元素。
我试过如下使用 jquery:
$(window).load(function () {
$(".overlay").each(function () {
var $parentHeight = $(".overlay").parent().height();
$(".overlay").css("margin-top", -$parentHeight);
});
});
结果相同。
最佳答案
你应该使用 top:0 而不是 margin-top:-100%;
.overlay {
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
z-index: 1;
-webkit-transition: .2s all;
position: absolute;
top:0;
}
我对您的样式进行了此编辑,请在此处查看:https://jsfiddle.net/IA7medd/ngmpm5x0/
关于jquery - 图像叠加层 "margin-top"无法正确显示不同的图像高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37238061/