如何使用 CSS 使元素的背景颜色变暗一点

Posted 2023-02-21

【中文标题】如何使用 CSS 使元素的背景颜色变暗一点

【英文标题】：How to make an element's background-color a little darker using CSS

【发布时间】：2021-03-25 14:24:15

【问题描述】：

我有一个按钮的以下 CSS：

.Button 
  background-color: #somehex;

当用户将鼠标悬停在按钮上时，我希望背景颜色更暗一些。我试过改变不透明度，但没有用，目前正在这样做：

.Button:hover 
  transition: 0.2s ease-in;
  background-color: #ALittleDarkerHex;

虽然此过程有效，但它确实很乏味，因为我必须手动寻找我正在使用的颜色的较暗版本。我想知道是否有一种更简单的方法可以使用 CSS 使按钮的背景颜色变暗。

【问题讨论】：

这能回答你的问题吗？ Is it possible to change only the alpha of a rgba background colour on hover?

【参考方案1】：

使用background-image 在其顶部添加一个深色图层。此方法使您的文本以相同的颜色可见，同时仅更改背景。

.button 
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color:red;


.button:hover 
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

进行过渡：

.button 
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color:red;
  transition:0.5s;


.button:hover 
  background-position:bottom;

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

混合混合模式的另一个想法：

.button 
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
  background-blend-mode: lighten;


.button:hover 
  background-blend-mode: darken;

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

【参考方案2】：

这是你可以做到的一种方式

.button 
  background-color: red;


.button:hover 
    filter: brightness(60%);

<button class="button">Button</button>

任何高于brightness(100%) 的东西都会增加亮度，任何低于brightness(100%) 的东西都会使其变暗。

【讨论】：

我喜欢这个想法，但改变亮度也会使按钮内的白色文本变暗。有没有办法避免这种情况？

如果您只想使用已有的按钮颜色并且不想重新调整所有内容，则此方法超级快速且有效。我不介意它也会使文本变暗。我只是想让用户知道他们正在悬停。

这种技术的一个缺点是它也会改变文本/字体颜色。

【参考方案3】：

将伪元素放在按钮内容后面并在悬停时修改其不透明度

const colors = ['#052F5F','#005377','#06A77D','#D5C67A','#F1A208'];
const btn = document.querySelector('.Button');
btn.addEventListener('click', (e) => 
  e.preventDefault();
  btn.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
);

.Button 
  background-color: #F1A208;
  color:#fff;
  border: 0;
  border-radius: 20px;
  padding: 10px 22px;
  cursor:pointer;
  position: relative;

.Button:before 
  content: '';
  position: absolute;
  z-index:0;
  border-radius: 20px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0);
  transition: .2s ease;

.Button span 
  position: relative;
  z-index:1;

.Button:hover:before 
  background-color: rgba(0,0,0,.3);

<button class="Button"><span>hover me</span></button>

【参考方案4】：

使用HSL 颜色值可能会满足您的需求。 HSL 颜色模型比 Hex (#FF334E) 更易于阅读。

HSL 颜色值指定为：hsl(hue, saturation, lightness)。

div 
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  color: white;


.Button 
  --hue: 712;
  --saturation: 100%;
  --lightness: 60%;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));


.Button.dark:hover 
  transition: 0.2s ease-in;
  --lightness: 40%;
  /* 20% dark */


.Button.light:hover 
  transition: 0.2s ease-in;
  --lightness: 80%;
  /* 20% light */

<div class='Button dark'>some text</div>
<div class='Button light'>some text</div>