使颜色20％更白

问题描述：

我有一个Spring Boot应用程序，我需要使颜色更加美白。首先，我尝试了CSS中的透明度，但后来我发现有些地方是重叠的，而且是可见的。使颜色20％更白

例如，我有这个颜色：＃de0059

现在我想大约20％的白加进去：＃e5337a

我怎样才能做到这一点在Java或纯CSS（不SASS什么其他）？我不想让颜色变浅，我想在透明的白色背景上使它变得透明。

的可能的复制[动态地更改颜色来按百分比变亮或变暗CSS（Jav ascript）]（https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript） – Bakudan

我不想让它更轻 –

我需要20秒，搜索，你知道 - https://topaxi.codes/modifying-css-colors-with-the-color-function/ – Bakudan

答

希望这可以帮助你。

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

<h1>Gradient text</h1>

答

在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构造函数的第四个参数是透明度，阿尔法通道，其中255 =完全不透明，0 =完全透明。

但是它并不接近229,52,122。有没有办法让＃de0059 0.8透明并将其与白色相结合？ –

如果你想使它变成20％白色和0.8透明，你可以结合上面：颜色更白=新颜色（颜色更浅=新颜色（col.getRed（）* 0.8，col.getGreen（）* 0.8， col.getBlue（）* 0.8,255 * 0.8）; –

答

非常有趣的问题。我不知道如何准确测量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

相关推荐