html - 如何将背景图片放在两个 div 前面？

Question

我正在使用带有自定义组件的 Angular 框架。这是代码：

</form-line>
        <form-line>
        </form-line>
        <form-line>
            <div *formLineChild>
                <img
                    src="cat.jpg">
            </div>
        </form-line>
        <form-line>
        </form-line>

我希望猫图像溢出两条白色表格线。这是它目前的样子：

https://i.stack.imgur.com/GAjWQ.png

标签： htmlcssangular

Answer 1

试试这个造型：

#formLineChild {
 position: relative;
 height: 70px;
 background-color: gray;
 margin-top: 2rem;
}

img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

<div id="formLineParent">
 <div id="formLineChild">
    <img src="https://source.unsplash.com/100x100/?cat">
 </div>
</div>