创建替代背景样式

Question

我想重现一种网站风格，我想像他们一样为背景做，也就是说交替设计：印刷电路板，深灰色背景，印刷电路板，深灰色字体，但是我不知道我的情况该怎么做，有人可以帮助我吗？

站点：https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc) 我在下面附上我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
    
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>
        <nav>
          <div class="middle">
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
          </div>
          <div class="right"> <!-- Socials --> 
            <a href="/">Social 1</a>
            <a href="/">Social 2</a>
          </div>
        </nav>
      </header>


</head>
<body>
    <h1>The Perfect Discord Bot.</h1>
    <h2>Poseidon is the only Discord bot you'll ever need!</h2>
</body>
</html>


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    width: 100%;
    background-image: url(img/background.svg);
    background-color: rgba(62,62,62, 1);
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    width: 100%; /* new */
}

.topbar nav {
    display: flex;
    width: 100%; /* new */
}

/* new class */
.middle {
  margin: 0 auto;
}
/* end new */

.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

h1 {
     text-align: center;
     color: #fff;
}

我想创建一个包含我的背景的 div，以便在我的 css 中定义一个精确的风格，但我从来没有这样做过，所以我真的不知道该怎么做（如何以正确的方式做到这一点）。由于我的 body class，目前我正在尝试 css，但它并不出名。如果有人有想法我很感兴趣。当然，我希望它最多是响应式的，因为自从我的网站创建之初我就尽量尊重响应式

Answer 1

你最初使用DIV的想法确实是正确的。

HTML

<div class="circuit"> Some content for the first part of the page</div>
<div class="dark"> Some content for the second part of the page</div>
<div class="circuit"> Some content for the third part of the page</div>

CSS

.circuit {
    background-image:url(URL_OF_THE_IMAGE);
}
.dark {
    background-color:#HEXCODE;
}

创建替代背景样式

Create an alternate background style

html

css

background

background-image