Material Design dark theme colors overlay [closed]

问题

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

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

How to make this?

回答1:

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.

来源：https://stackoverflow.com/questions/57597368/material-design-dark-theme-colors-overlay

标签

html

css

material-design