材质设计深色主题颜色叠加 [英] Material Design dark theme colors overlay

问题描述

我要使用Material Design深色主题指南( https://material.io/HTML代码中的design/color/dark-theme.html )，但我找不到信息，如何覆盖颜色以获得较浅的颜色(例如:深灰色(#121212 ))背景和较浅的面板).

I want use Material Design dark theme guidelines (https://material.io/design/color/dark-theme.html) in HTML code, but i can't find info, how to overlay colors for get lighter colors (example: Dark gray (#121212) background and bit lighter panels).

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

I know that some JS frameworks support this, but i want use pure HTML/CSS.

如何制作?

推荐答案

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

I'm not sure if this is exactly what you're describing, but you can create an element with a background-color that has adjustable transparency using an RGBA color. IE to do a 50% translucent white overlay: 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>

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

You could also layer your colors using gradient background-images, which would let you do the layering in a single element. This lets you stack the colors:

.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>

确保将顶层放在规则中.

Make sure to put the top layer first in the rule.

这篇关于材质设计深色主题颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！