时间戳

首页 > 解决方案 > 带有弹性容器和显示背景图像的引导布局登录页面问题

html - 带有弹性容器和显示背景图像的引导布局登录页面问题

问题描述

一段时间以来，我一直在为一些非常痛苦的问题而苦苦挣扎。

我正在尝试使用简单的布局创建登录页面：

在宽度超过 800 像素的屏幕上：

在小于或等于 800 像素的屏幕上：

html文件

<div class="flex-container">
<div class="col-lg-4 index-top">
    <div class="row">
        <div class="col log-in">
            <div class="col no-padding">
                <h1>
                    <img src="/img/AnonimowySygnalista.svg" alt="logo Anonimowy Sygnalista" class="logo-login" />
                    <span class="sr-only hidden">Anonimowy sygnalista</span>
                </h1>
                <form action="">
                    <label for="">UserName</label>
                    <input type="" id="" name="" placeholder="Wpisz otrzymany login" class="input"></input>
                    <input type="submit" value="Zaloguj" class="btn-primary"></input>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-8 col background-img">
</div>

CSS 文件

.container {
    display: block;
    padding: 0;
    margin: 0;
}
.flex-container {
    display: flex;
    flex-direction: column;
}
input, textarea {
    display: block;
}
.right {
    float: right;
}
.left {
    float: left;
}
.clear {
    clear: both;
}
label {
    font-weight: 700;
    margin-bottom: .75rem;
}
.btn-primary {
    background-color: #1F7AAB;
    border-radius: 4px;
    border-color: #1F7AAB;
    padding: .5rem 1.5rem;
    width: 100%;
    box-shadow: none;
    color: #fff;
}
.background-img {
    background-image: url('../img/pexels-vlada-karpovich-4050312.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: -1.25rem;
}
.input {
    margin-bottom: 1.5rem;
    max-height: 5rem;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px solid #767676;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}
.log-in h1 {
    margin: 3rem 0;
}
.index-top {
    z-index: 999;
}
@media (min-width: 801px) {
    .container {
        width: 100% !important;
    }
    .flex-container {
        padding-right: 80px;
        flex-direction: row;
    }
    .index-top {
        margin: 0 80px;
    }

标签： htmlcss

解决方案

将元素堆叠在一起使用position : absolute

将其添加到.background-img@media 内部应该会产生效果，您还需要z-indexcss 属性来管理哪个元素在哪个元素后面

推荐阅读