使颜色变白20%

Question

我有一个Spring Boot应用程序，我需要使颜色更白。一开始，我只是在CSS中尝试了透明度，但后来我注意到一些地方是重叠的，它是可见的。

例如，我有这样的颜色：#de0059

现在我想添加大约20%的白色：#e5337a

我如何在Java或纯CSS (不是SASS或其他东西)中做到这一点？我不想让颜色变得更浅，我想让它在白色背景上变得透明，而不是透明。

Answer 1

在Java语言中，你可以做Color.brighter()，但是你不能定义你想要的颜色变亮多少。或者，如果您可以这样做

Color col = new Color(222, 0, 89); //The RGB equivalent of #de0059
Color lighter = new Color(col.getRed() * 0.8, col.getGreen() * 0.8, col.getBlue() * 0.8);

如果你只是想增加透明度，你可以这样做

Color transparent = new Color(col.getRed(), col.getGreen(), col.getBlue, (255*0.8));

Java构造函数中的第四个参数是透明的alpha chanel，其中255 =完全不透明，0=完全透明。

Answer 2

很有趣的问题。我不知道如何准确地测量20% whiter，但如果你知道这背后的理论，你可以用brightness和contrast css过滤器达到你想要的结果。我提供一个例子：

​

.box {
   display: inline-block;
   width: 80px;
   height:80px;
   line-height: 80px;
   color: #ffffff;
   text-align: center;
   font-family: sans-serif;
   margin-right: 1px;
}

.box-1 {
  background-color: #de0059;
}
 
.box-2 {
  background-color: #e5337a;
}
 
.box-3 {
  background-color: #de0059;
  filter: brightness(120%) contrast(70%);
}

<p>using pure colors</p>
<div class="box box-1">#de0059</div>
<div class="box box-2">#e5337a</div>
<br>
<p>using css filters</p>
<div class="box box-1">#de0059</div>
<div class="box box-3">calculated</div>

​

我的资料来源：

• Dynamically change color to lighter or darker by percentage CSS (Javascript)
• MDN - CSS filter property

Answer 3

希望这对你有帮助。

​

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#333, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Gradient text</h1>

​