在HTML / CSS中创建扩展的横幅背景颜色效果的最佳方法是什么？ [关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

关闭10分钟前。

我不确定我的问题能否很好地解释问题。我要达到的效果是照片中显示的效果，即具有扩展的横幅（在这种情况下为黑色和蓝色），将主div的颜色一直扩展到整个视口。

Answer 1

[对不起，但我不确定您面临的问题，但我希望复制图像中的布局，希望它是您想要的。

            body {
                margin: 0;
                background: linear-gradient(
                    to bottom,
                    #222222 100px,
                    #1d1d1d 5px,
                    #70c0db 2px,
                    #5698ce 300px,
                    #dce9ec 10px
                );
            }
            .header {
                height: 100px;
                width: 100%;
                background-color: #333;
                color: white;
            }

            header {
                height: 200px;
                width: 100%;
                background-color: #64a4d8;
            }
            .container {
                background: white;
                height: 100vh;
                width: 100%;
                max-width: 500px;
                margin: 0 auto;
                box-shadow: 1px 1px 20px rgb(0, 0, 0);
            }

        <div class="container">
            <div class="header">
                Search
            </div>
            <header>Header</header>
            Main content
        </div>

要获得更好的外观，请在全屏模式下运行该代码段。如果我正确回答了您，或者我犯了一个错误，请随时告诉我，希望对您有所帮助。

Answer 2

        body {
            margin: 0;
            background: linear-gradient(
                to bottom,
                #222222 100px,
                #1d1d1d 5px,
                #70c0db 2px,
                #5698ce 300px,
                #dce9ec 10px
            );
        }

线性渐变解决了！我还没想到要以此为背景，非常感谢！