Question

我想在HTML代码中使用Material Design深色主题准则（https://material.io/design/color/dark-theme.html），但我找不到信息，即如何叠加颜色以获得较浅的颜色（例如：深灰色（#121212）背景和较浅的面板）。

我知道某些JS框架支持此功能，但是我想使用纯HTML / CSS。

如何制作？

Answer 1

我不确定这是否正是您要描述的内容，但是您可以使用background-color创建一个元素，并使用RGBA颜色来调整透明度。 IE进行50％半透明的白色覆盖：background-color: rgba(255,255,255,0.5)。

.container {
  background-color: darkred;
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  background-color: rgba(255, 255, 255, 0.5);
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="content">
  test
  </div>
</div>

您还可以使用渐变背景图像对颜色进行分层，这将使您可以在单个元素中进行分层。这使您可以堆叠颜色：

.content {
  height: 200px;
  width: 200px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(darkred 0%, darkred 100%);
}

<div class="content">
  test
</div>

确保将顶层放在规则中。

材质设计深色主题颜色叠加

1 个答案: