Question

我必须将一个组件置于另一个组件之上。我想将背景图像从较低的图像拉伸到较高的图像。我将上一个的背景设置为透明，但是我不知道该怎么做才能在第二个组件的上方拉伸图像。我有

display: block;
background-image: url(${background});
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% -50%;

，但是size属性无效，并且没有看到任何正值执行我想要的操作。你能帮忙吗？

Answer 1

如果没有适当的链接，很难确切知道您要做什么，但是我认为您可以通过使第二个分量为负margin-top并等效为padding-top来实现此目的。 >

HTML：

<div class="comp-a">
    I am the first component
</div>
<div class="comp-b">
    I am the second. I control the background!
</div>

CSS：

* {
    box-sizing:border-box;
}

.comp-a {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.comp-b {
    height: 200px;
    padding-top: 100px;
    margin-top: -100px;
    background: red;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
}

http://jsfiddle.net/hrsapyqv/

将背景图像拉伸到上方的组件

1 个答案: