如何使用CSS让元素的背景颜色变暗一些？

Question

我有以下用于按钮的CSS：

.Button {
  background-color: #somehex;
}

当用户悬停在按钮上时，我希望background-color变得稍微暗一些。我尝试了改变透明度，但不起作用，目前我是这样做的：

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

虽然这个过程可行，但很繁琐，因为我必须手动寻找颜色的深色版本。我想知道是否有一种更容易的方式，可以使用CSS来加深按钮的background-color。

- Questions123

Answer 1

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

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

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/40%) 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(#0000, rgb(0 0 0/40%)) 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(rgb(0 0 0/40%) 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>

你还可以考虑一个大的内部盒阴影，而且你也有能力添加过渡效果：

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  box-shadow: 0 0 0 100vmax inset rgb(0 0 0/var(--o,0%));
  transition: .4s;
}

.button:hover {
  --o: 40%;
}

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

- Temani Afif

---

使用background-position属性时，如何考虑按钮上的粗边框？看起来需要进行一些偏移吗？ - Kalnode

这实际上看起来效果不错（带边框的按钮）：background-position: calc(100% + 2px);，其中2px是边框宽度。 - Kalnode

你应该将color-mix添加到这个列表中！也许还有相对颜色。 - undefined

@ZachSaucier 要使用color-mix，我需要将颜色作为一个变量，但是这里的输入是应用于background-color的颜色。 - undefined

对于正在寻找的人来说，我敢打赌大多数人都会受益于知道它的存在。 - undefined

Answer 2

以下是一种您可以实现它的方式

.button {
  background-color: red;
}

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

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

在brightness(100%)之上的任何值都会增加亮度，而在其以下则会使其变暗。

- fdsafas

---

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

如果您只想使用已有的按钮颜色而不想重新调整一切，那么这种方法非常快速有效。我不介意它会使文本变暗。我只是想让用户知道他们正在悬停。 - bonzo46

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

Answer 3

您可以考虑使用HSL颜色值，这可以更好地满足您的需求。与十六进制颜色代码(#FF0033)相比，HSL颜色模型更易于人类阅读和理解。

HSL颜色值的指定方式为：hsl(色调, 饱和度, 亮度)。

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

.Button {
  --hue: 348;
  --saturation: 100%;
  --lightness: 50%;
  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'>PayPay</div>
<div class='Button light'>PayPay</div>

- Penny Liu

Answer 4

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

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>

- Maciej Kwas

Answer 5

如果您将背景颜色调暗并添加到悬停功能中，再添加过渡效果使其更加平滑，那么这将更容易实现。您可以使用RGB或RGBA来设置背景颜色。

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

<style>
  .button {
    Border: none;
    Border-radius: 4px;
    Color: white;
    Cursor: pointer;
    Width: 86px;
    Height: 32x;
    Background-color: rgba(121, 82, 179);
    color:white
    transition:all 1s;
  }
  
  .button:hover {
    Background-color: rgba(114, 77, 170, 80);
  }
</style>

- ToGod Chukwudume

---

OP在询问是否有比在各个地方粘贴较暗的颜色代码更简便的方法。 - Kalnode