响应模式下底部背景位置错误

Question

当我切换到响应模式时，底部白色图像不在父 ul 元素的底部。

你能帮我解决这个问题吗？图像从父元素的底部开始有 position:absolute 和 0（在提供的屏幕截图上标有红色矩形），因此它应该可以正常工作....

这里是 link 页面，您可以在其中检查元素：Slider

Answer 1

问题出在背景伪元素的固定高度上：

所以尝试使用 calc css3 动态设置高度并将 background-size 设置为 100% :

.slideshow:after {
    content: "";
    background: url(../img/bottom.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(31%);
    z-index: 999999;
}

响应模式下底部背景位置错误

Bad position of bottom background in responsive mode

html

javascript

css

jquery

slideshow