Material Design深色主题颜色叠加[关闭]答案

【问题标题】：Material Design dark theme colors overlay [closed]Material Design深色主题颜色叠加[关闭]
【发布时间】：2019-08-21 18:28:36
【问题描述】：

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

我知道一些 JS 框架支持这个，但我想使用纯 HTML/CSS。

这个怎么做？

【问题讨论】：

标签： html css material-design

【解决方案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>

确保在规则中将顶层放在首位。

【讨论】：