在不添加图像的情况下制作多色背景的最佳方法是什么？答案

【问题标题】：What is the best way of making a multicolored background without adding in an image?在不添加图像的情况下制作多色背景的最佳方法是什么？
【发布时间】：2019-03-22 19:25:40
【问题描述】：

我正在开发一个模拟网站，但遇到了问题。 Here 是我引用的 wix 网页。我想滚动到我的网页底部并制作可以放置文本的多色 div 框。简单地说，我想不通。当我尝试制作一个 div 时，它会覆盖我的背景图片。这是怎么做到的？提前感谢您的帮助。

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Keith Consulting</title>

    <style>
        body {
            background-image: url("https://66.media.tumblr.com/d0914fab2603665235669293d3b61c37/tumblr_os8sx9UAHb1slhhf0o1_1280.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: bottom;
            font: 15px/1.5, helvetica, sans-serif;
        }

        p,
        h1,
        h3 {
            text-transform: capitalize;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        /*--------------header----------------*/


        header {

            background-color: cornflowerblue;
            color: white;
            padding-top: 30px;
            min-height: 50px;
            text-transform: capitalize;

        }

        header ul {
            padding: 0;
            margin: 0;
        }

        header li {
            display: inline;
            padding: 0 20px 0 20px;
        }

        header li a {
            color: blue;
        }

        header nav {
            float: right;
            margin-top: 15px;
        }

        header #branding {
            float: left;
            margin-bottom: 25px;
        }

        header #branding h1 {
            margin: 0;
        }

        header .highlight,
        header .current a {
            color: lavender
        }

        /*-------------------------------*/

       
        
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1>keith<span class="highlight"> consulting</span></h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">clients</a></li>
                    <li><a href="#">contact</a></li>

                </ul>
            </nav>
        </div>

    </header>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>

【问题讨论】：

为什么你认为它是一个多彩的背景，而不是一系列不同背景的元素？
我只是在评论外观，我很确定它只是一堆彩色的 div 堆叠在一起。我只是不知道它是怎么做到的

标签： html css bootstrap-4

【解决方案1】：

也许这对你有帮助？ https://www.solodev.com/blog/web-design/how-to-create-a-parallax-hero-image.stml

如果你想让元素半透明（如果这就是你所说的“多色”），那么你可以使用rgba color。

【讨论】：

感谢您提供的链接，我肯定会为它添加书签并将 if 用于我的下一个项目。很抱歉造成混乱，我的问题已经解决了，但我想问一下如何在背景的不同部分添加色块。