如何使任何悬停的颜色比原始颜色更暗/更亮

Posted 2023-02-21

技术标签:

【中文标题】如何使任何悬停的颜色比原始颜色更暗/更亮【英文标题】：how to make ANY hovered color darker/lighter that the original 【发布时间】：2019-05-09 23:45:51 【问题描述】：

我想这样当你将鼠标悬停在一个元素上时，它总是比最初更暗或更亮。无论颜色如何

类似但通用的东西

.darker
Background:red;
width:100px;
height:100px


.darker:hover
Background:#b20000

.lighter 
Background:blue;
width:100px;
height:100px


.lighter:hover
Background:#adccff

<div class='darker'></div>
<div class='lighter'></div>

【问题讨论】：

像filter: brightness(50%); 这样的css过滤器可能吗？ caniuse.com/#feat=css-filters 也许有办法让它与 jquery 一起工作？有人吗？？你正在做的奇怪的事情。但是，使用不透明度或过滤器来改变亮度。 developer.mozilla.org/en-US/docs/Web/CSS/filter-function/… 已经试过了！不透明度不会使事情变暗，过滤器会使文本变得太亮 “太亮”？那就把它调高一点... 【参考方案1】：

您正在寻找brightness CSS filter：

brightness() CSS 函数对输入图像应用线性乘数，使其看起来更亮或更暗

div 
  width: 50px;
  height: 50px;
  background: red;
  filter: brightness(1);


.light-on-hover:hover 
  filter: brightness(5.00);


.dark-on-hover:hover 
  filter: brightness(0.5);

<h5> Darker on hover </h5>
<div class="dark-on-hover"></div>

<h5> Lighter on hover </h5>
<div class="light-on-hover"></div>

【讨论】：

当我在按钮上使用它时，一开始会变亮，但很快就会恢复正常......而且文字也变得太亮那是因为您的按钮文本与背景颜色截然不同；因此它变得比它应该的要亮得多。使用您的颜色并使用较低的 +brightness 值。但我只是将上面的代码复制并分配给一个按钮元素让我再解释一下。过滤器应用于元素上的所有颜色。如果文本颜色比背景颜色浅得多，则文本将显示为“烧焦”，达到使背景看起来略亮所需的亮度级别。您也可以使用filter: contrast 侥幸逃脱，但我不确定。您的原始帖子从未提及按钮。不适用于您的用例；等待其他答案。或者问另一个问题：“如何确保filter: brightness 不会使文本看起来被烧毁”之类的。这是一个有趣的问题。【参考方案2】：

有一种方法可以通过添加伪元素作为叠加层来做到这一点

见代码sn-p

div 
  position: relative;
  display: inline-block;
  color: white;
  font-size: 18px;
  padding: 50px;


div > * 
  position: relative;
  z-index: 2;


div.red 
  background: red;


div.green 
  background: green;


div.blue 
  background: blue;


div:after 
  content: '';
  display: inline-block;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;


div:hover::after 
  opacity: .3;

<div class="red"><span>text</span></div>
<div class="green"><a href="#">link</a></div>
<div class="blue"><button>button</button></div>

【讨论】：

酷！但我怎样才能让它反过来工作呢？悬停时点亮可以将伪元素的背景从黑色改为白色【参考方案3】：

您可以考虑多个背景和一些 CSS 变量，如下所示。这个想法是通过调整background-size在顶部添加一些白色或黑色

.color 
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
    linear-gradient(var(--c, red), var(--c, red));
  background-size: 0 0, 0 0, auto;
  width: 100px;
  height: 100px;
  display:inline-block;


.darker:hover 
  background-size:auto,0 0,auto;


.lighter:hover 
  background-size:0 0,auto,auto;


.blue 
 --c:blue;

.green 
 --c:green;


.yellow 
 --c:yellow;



.pink
 --c:pink;

<div class='color darker blue'></div>
<div class='color lighter blue'></div>
<div class='color lighter red'></div>
<div class='color darker red'></div>
<div class='color darker green'></div>
<div class='color lighter yellow'></div>
<div class='color darker pink'></div>

【讨论】：

【参考方案4】：

嗯，我可以想象两种选择

1) 在按钮内使用一个元素，并为该元素设置一个不透明的背景，例如 https://codepen.io/anon/pen/WLNbPG（虽然有点 hacky）

<button id='button1'><span>Darker</span></button>

<button id='button2'><span>Lighter</span></button>

和 CSS

button 
  border: 0;
  background-color: red;
  padding: 0;

button span 
  display: block;
  padding: 1em


#button1:hover span 
  background-color: rgba(0,0,0,.4);


#button2:hover span 
  background-color: rgba(255,255,255,.4);

这样，带有不透明度的跨度背景可以使按钮的背景变暗或变亮。

2) 使用图像作为按钮背景，并在悬停时添加具有 alpha 值的颜色并使用 background-blend-mode: darken/lighten https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode 但它对 Edge 或 android 的 webviews 没有很好的支持.

【讨论】：

第一个好！但 span 元素并没有覆盖整个按钮。我怎样才能让它继承按钮元素的宽度和高度？所以它对于我为按钮设置的任何宽度/高度都很灵活？至少在我的 codepen 代码中，我看到 span 覆盖了 FF 和 Chrome 中的整个按钮，您在我的 codepen 或您的代码中看不到吗？如果您更改按钮大小但是您如何更改按钮大小？展示你现在得到的东西【参考方案5】：

我认为你没有清楚地解释你想要做什么。我下面的解决方案回答了你在这句话中提出的问题：

“我想为按钮元素分配一些背景......并且我想这样做，以便当您添加类名 get-darker 或 get-lighter 并将鼠标悬停在按钮上时，它会将其颜色更改为较暗/打火机。”

<!DOCTYPE html>
<html lang="en-us">

<head>
    <style>
        button 
            background-color: red;
            padding: 20px;
            margin: 20px;
        

        button:hover.get-darker 
            background-color: darkslategray;
        

        button:hover.get-lighter 
            background-color: gray;
        
    </style>

</head>

<body>
    <button class="get-darker">
        this button will get darker
    </button>
    <button class="get-lighter">
        this button will get lighter
    </button>
</body>

</html>

【讨论】：

是的。但它应该只是比原来更暗/更亮的几个阴影，不管初始颜色如何，而不是像这里那样完全灰色。那么你可以设置opacity: 0.5而不是background-color。【参考方案6】：

你可以使用不透明度来使它像：-

div
Background:rgba(255, 0, 0, 0.8);
width:200px;
height:200px


div:hover
Background:rgba(255, 0, 0, 1)

&lt;div&gt;&lt;/div&gt;

【讨论】：

opacity 可能会使它看起来更暗，但它也有变得透明的副作用。

以上是关于如何使任何悬停的颜色比原始颜色更暗/更亮的主要内容，如果未能解决你的问题，请参考以下文章

从 UIColor 获得稍微更亮和更暗的颜色

为给定的 UIColor 获取更亮和更暗的颜色变化

如何确定给定颜色的较深或较浅颜色变体？

如何将Hex颜色值转换为libgdx颜色？

CSS - 悬停时变暗，颜色未知[重复]

以编程方式使飞镖中的十六进制颜色变亮或变暗