Question

我是css的新手我需要将HTML页面拆分为两个背景，我需要有文本和登录表单。我还有示例css和html代码

我已经尝试过这样的css

.logindiv {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 50%, #FFFF 50%);
}

HTML

<div class="container logindiv">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Please Sign In</h3>
                </div>
                <div class="panel-body">
                    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-signin" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true)

                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" name="Username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                </label>
                            </div>
                            <!-- Change this to a button or input when using this as a form <a href="#" class="btn btn-lg btn-success btn-block">Login</a> -->

                            <button class="btn btn-lg btn-primary btn-block" name="logsubmit" id="logsubmit" type="submit">Login</button>

                        </fieldset>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这样做:(我将第二种颜色从白色变为灰色，因为你不会在白色背景上看到它）

.logindiv {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
}

<div class="logindiv"></div>

如何使用css将背景颜色分成两部分

1 个答案: