如何为网站的背景着色两种不同的颜色？

Question

这是一个很难表述的问题，所以我附上了我在 Pages (Mac) 中制作的网站设计的屏幕截图 - 我做到了因此，通过使用不同颜色的块并将它们堆叠在一起，以创建可以在第一个屏幕截图中看到的所需效果。

我的问题是：我如何模拟这个，HTML中的不同颜色背景？

我尝试使用 CSS 中的 HTML 标签对填充进行不同的着色（HTML

{ padding: 10%; background-color: #ebecef; }

) 但我没能完全概括我的梦想。我试图制作 divs（因为它们是 'block tags'）并用不同的颜色给它们上色，但它没有用。

Pages Screenshot example

High Contrast Screenshot example

高对比度页面描述：蓝色将是基本背景颜色，橙色将是 inset/overlay，粉红色将是 div 导航栏，但其颜色与 inset/overlay 如第一张图片所示。

尝试澄清：如何创建不同颜色的块并将它们转换到特定位置，或者为背景颜色创建一种双色调效果这是 'inseted' 本身或叠加 （以最简单或有效的为准）就像图片中看到的那样（灰色是基色，白色是inseted/overlayed.)?

的附加颜色

我真的希望我解释得足够好，如果您能提供帮助，我们将不胜感激，

DeSept

Answer 1

在非常基本的层面上，您可以使用嵌套 div 来实现这一点，结合 css position 属性和 top 设置宽度和高度，left css 属性。如下所示：

    <div style="width: 100vw;height: 100vh;background-color: blue;position: relative;">
      <div style="height: inherit; width: inherit;">
        <div style="width: 100%; height: 80px;margin-right: 20%">
          <div style="width: 340px; height: 80px; background-color: green; float: right;margin-right: 10%">
        </div>
      </div>
      <div style="width: 80%;height: 80%;background-color: yellow;margin: auto auto;">
        <h1 style="position: absolute; top: 40px;left:120px">Lorem Ipsum</h1>
      </div>
    </div>

沙盒： https://codesandbox.io/s/optimistic-voice-zgt9k?file=/index.html:0-830

但是，这个解决方案没有响应，而且非常基础；作为替代方案，您可以查看 CSS Grid 或 Flexbox 以实现您在附加图像中寻找的布局。

CSS弹性框： https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

CSS 网格： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Answer 2

我试着重画了你的照片。这不一样，但你可以使用我的风格来实现你的目标。我将 Nav 用作 div，但互联网上有很多更好的 Nav 示例，例如 Bootstrap NAV。这不是响应式的，那么你必须在那里添加 @media css，也许使用折叠导航栏。

body{
  background-color: blue;
}
.Center80{
  margin: 0 auto;
  width: 80vw;
}
.Menu{
  height: 20px;
  width: 30vw;
  margin-right: 0;
  background-color: #a119aa;
}
.SecondColor{
  background-color: orange;
  min-height: 100vh;
}
.SecondColor h1 {
  transform: translate(0px,-13px);
  color: white;
  font-size: 25px;
}

<html>
<body>
  <div class="Center80 Nav" align="right">
    <div class="Menu">
      Menu
    </div>
  </div>
  <div class="SecondColor Center80">
    <h1>LOREM IPSUM</h1>
  </div>
</body>

Answer 3

特别是考虑到响应式设计时，我会用网格来做。您只需要 3 个框，就可以使标题与偏移量发生冲突或更正填充。只需确保将 z-index 设置为将其推到前面即可。

body {
  background-color: lightgrey;
  display: grid;
  grid-template-columns: 30px 40% auto 30px;
  grid-template-rows: 48px auto;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 16px;
}

#title {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: transparent;
  text-align: center;
  padding-top: 38px;
  z-index: 1;
  font-size: 20px;
}

#menu {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: orange;
  text-align: center;
  padding-top: 16px;
}

#content {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: -1;
  background-color: yellow;
  min-height: 100vh;
  padding: 10px 10px 10px 10px;
}

<body>
  <div id="title">Title</div>
  <div id="menu">Menu Link</div>
  <div id="content">
    <p>Random text content...</p>
  </div>
</body>

Answer 4

如果您希望两种颜色混合或混合，您也可以使用 linear-gradient 语法，具体取决于颜色之间是硬线还是软线。在此处了解更多信息：https://www.w3schools.com/css/css3_gradients.asp

语法示例如下：

#grad { background-color: linear-gradient(-90deg, red, yellow); }

如何为网站的背景着色两种不同的颜色？

How color the background of website two different colors?

html

css

padding

background-color