Question

我试图在我的DIV底部对齐图像，这恰好是背景。为了使案例更加真实，我还添加了一些叠加（因为这就是我在项目中的表现）。

background-size: 100% 100%;

这将使背景大小达到DIV的100％，但不会伸展，所以它将是300px高（如果我的DIV高300px）。

我如何制作它，所以当我调整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>

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

1 个答案: