时间戳

首页 > 解决方案 > 如何实现颜色 B = 颜色 A 应用 30% 黑色 (#000000) 透明度

css - 如何实现颜色 B = 颜色 A 应用 30% 黑色 (#000000) 透明度

问题描述

假设我有一个box1with background-color :red。在box2那里我需要设置border-top基于box1红色（75%）和黑色（25%）的背景颜色。每当我更改背景颜色时box1，我需要设置box2（box1 的当前背景颜色（75%）和 25% 黑色的边框顶部。

标签： css

解决方案

使用hsl()可以调整亮度的颜色以获得所需的颜色：

.box {
  --color:0, 100%;
  
  border:20px solid hsl(var(--color),20%); /*50% - 30%*/
  background:hsl(var(--color),50%);  /*this is red*/

width:100px;
  height:100px;  
  display:inline-block;
}
<div class="box"></div>

<div class="box" style="--color:240, 100%;"></div>

<div class="box" style="--color:120, 100%;"></div>

推荐阅读