css - 即使调整大小时，背景图像也会在底部对齐

Question

我试图在我的 DIV 底部对齐一张图片，它恰好是背景。为了使案例更加真实，我还添加了一些叠加层(因为我在我的元素中就是这样做的)。

https://jsfiddle.net/jy0w2jmr/

background-size: 100% 100%;

这将使背景大小为 DIV 的 100%，但不会拉伸(stretch)，因此它的高度为 300 像素(如果我的 DIV 为 300 像素高)。

我如何做到这一点，所以当我调整 DIV 大小时，背景图像也会调整大小，但会粘在 DIV 的底部并且永远不会溢出 DIV？ background-position: bottom; 似乎没有把它粘在我的 DIV 的底部。

Answer 1

这对你有用吗？

#container {
    width: 100%;
    height: 300px;
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");

    position: relative;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.5;
}

#container {
    width: 100%;
    height: 300px;
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg");
   
    position: relative;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.5;
}

<div id="container">
    <div class="overlay"></div>
</div>