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

问题描述

这是一个很难解决的问题，因此，我提供了我在Pages（Mac）中制作的网站设计的屏幕截图-通过使用不同的彩色块并将它们堆叠来实现彼此叠加以创建所需的效果，该效果可以在第一个屏幕截图中看到。

我的问题是：我如何仿真这种 HTML中不同颜色的背景？

我尝试用CSS（HTML

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

），但我未能完全实现我的梦想。我试图制作div（因为它们是“块标签”）并以不同的颜色进行着色，但这没有用。

Pages Screenshot example

High Contrast Screenshot example

高对比度页面描述：蓝色将作为基本背景颜色，橙色将作为插入/覆盖，粉红色将作为div导航栏，但其绘制的颜色与第一张图片中的插入/覆盖相同。

要尝试弄清：一种方法，要么创建不同颜色的块并将其转换到某个位置，要么为“插入”的背景颜色创建一种双色调效果（无论是最简单还是可行的），就像在图片中看到的那样（灰色是基础色，白色是插入/叠加的其他颜色）。？

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

DeSept

解决方法

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

下面的示例语法：

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

尤其是考虑到响应式设计时，我会使用网格来实现。您只需要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>

在最基本的级别上，您可以使用嵌套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 Flexbox： 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

我试图重绘你的照片。那不一样，但是您可以使用我的样式来达成目标。我将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>

background-color html padding

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

问题描述

解决方法

相关问答