Question

我在一个模拟网站上工作，遇到了一个问题。 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>

Answer 1

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

如果要使元素半透明（如果这就是“多色”的意思），则可以使用rgba color。

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

1 个答案: