使用 Brightness() 过滤器通用地突出显示内容

我无法告诉你这些年来我实现过多少次自定义的 “按钮” 样式 CSS 实现。这些年来，我使用过图像、背景、渐变和不透明度来有效地 “突出显示” 控件。所有这些当然都有效，但大多数这些方法的问题在于，你最终都会硬编码颜色值、图像或渐变。

如果你指定确切的颜色，你当然会拥有更多控制权，但如果你能以一种在你的网站上感觉一致的方式实现亮化、暗化，甚至色调偏移，那么这无疑会减少很多需要维护的代码。

.button.specific-button {
  background: #4CAF50;
}
.button.specific-button:focus,
.button.specific-button:hover {
  background: #A5D6A7;
}

/* vs. */
.button:focus,
.button:hover {
  filter: brightness(120%);
}

/* or maybe you're super hardcore and do it everywhere */
:focus,
:hover {
  filter: brightness(120%) saturate(120%);
}

直接链接 →

评论