如何使用CSS在悬停时使按钮背景颜色变暗
在我的应用程序中，我的 React 项目中的按钮具有以下 css 代码：
.Button {
background-color: #somehex;
}
当用户将鼠标悬停在按钮上时，我希望背景颜色更深一些。我试过改变不透明度，但没有用，目前正在这样做：
.Button:hover {
transition: 0.2s ease-in;
background-color: #ALittleDarkerHex;
}
虽然这个过程有效，但它真的很乏味，因为我必须手动寻找我正在使用的颜色的较暗版本。我想知道是否有一种更简单的方法可以使用 CSS 使按钮的背景颜色变暗。
回答
使用 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> some text </div>
<div> some text </div>
<div> some text </div>
<div> some text </div><div> some text </div>
<div> some text </div>
<div> some text </div>
<div> some text </div><div> some text </div>
<div> some text </div>
<div> some text </div>
<div> 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;
}混合模式的另一个想法：
.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;
}