时间戳

首页 > 解决方案 > CSS背景图像不显示在另一个之上

html - CSS背景图像不显示在另一个之上

问题描述

实际上，我必须将背景图像放在另一个上，如下所示：

预期输出：
在此处输入图像描述

我将第一张背景图片添加到了body，另一张作为背景添加到inner-body-class。背景图像显示正确，但第二body个背景图像根本不显示。

检查下面附加的检查元素代码：

工作身体形象（代码）：
在此处输入图像描述

第二张图片“inner-body”图片未显示（代码）：
在此处输入图像描述

但是，如果我为（例如 600 像素）指定高度，inner-body则显示图像，但这不是正确的方式，因为在响应模式下它会很糟糕。

我究竟做错了什么？

我的代码：

<html>
<head>
    <title>Login</title>
    <style type="text/css">
        body {
            background: url("bg-image1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .inner-body {
            background: url("bg-image2.jpg");
            background-size: auto;
            /*height: 687px;*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner-body">
            <div class="form-body"> </div>
        </div>
    </div>
</body>
</html>

标签： htmlcssresponsive-design

解决方案

将此样式赋予 html、body 和容器：

CSS

html, body, .container {
   min-height: 100%;
}

body {
   padding: 200px;
}

.inner-body {
   max-height:80%;
}

推荐阅读