是否可以在悬停时仅更改 rgba 背景颜色的 alpha？答案

【问题标题】：Is it possible to change only the alpha of a rgba background colour on hover?是否可以在悬停时仅更改 rgba 背景颜色的 alpha？
【发布时间】：2011-10-21 04:53:31
【问题描述】：

我有一组<a> 标签，它们的 rgba 背景颜色不同，但 alpha 相同。是否可以编写一个只改变 rgba 属性的不透明度的 CSS 样式？

代码的简单示例：

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a>

还有样式

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

我想做的是编写一个样式，当<a> 悬停在上面时会改变不透明度，但保持颜色不变。

类似

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

【问题讨论】：

顺便问一下，你的div 元素在你的a 元素中做了什么？
@BoltClock HTML5 allows block-level a elements.
@mercator：好的。我错过了。
@BoltClock 这似乎是为效果编码的最简单方法，一个a 标签，而不是一个围绕img 和另一个围绕文本的标签。 HTML 5 支持这一事实是一个很好的奖励。
当这个问题被问到时——这在 CSS 中是不可能的。现在这是可能的 - 使用CSS Variables - 正如我在my own answer中展示的那样

标签： css hover background-color rgba

【解决方案1】：

现在可以使用自定义属性：

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

要了解其工作原理，请参阅How do I apply opacity to a CSS color variable?

如果自定义属性不是一个选项，请参阅下面的原始答案。

很遗憾，不，您必须为每个单独的类再次指定红色、绿色和蓝色值：

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

您只能单独使用 inherit 关键字作为属性的值，即使这样使用 inherit 在这里也不合适。

【讨论】：

急切地等待颜色修改函数 (w3.org/TR/css-color-5) 所以我们不必将颜色通道定义为列表。

【解决方案2】：

如果您愿意，您可以做各种事情来避免对数字进行硬编码。其中一些方法仅在您使用纯白色背景时才有效，因为它们实际上是在顶部添加白色而不是降低不透明度。第一个应该适用于提供的所有内容：

您还没有使用伪元素做某事；和
您可以在<div> 标签上将position 设置为相对或绝对

选项1：`::before`伪元素：

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

选项 2：白色 gif 叠加：

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

选项 3：`box-shadow` 方法：

gif 方法的一种变体，但可能存在性能问题。

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

CodePen 示例：http://codepen.io/chrisboon27/pen/ACdka

【讨论】：

很好的答案，谢谢。如果我反转此方法，我发现第三个选项有用且更简单：不要在没有悬停的情况下使用任何额外的东西，并且在悬停时使用：box-shadow: inset 0 0 0 99999px rgba(128,128,128,0.2)。这对我来说是必要的，因为我的行交替白色和浅灰色，所以原来的答案没有改变白色。

【解决方案3】：

不，这不可能。

不过，如果你想做这种事情，你可以试试CSS pre-processor。

据我所见，至少LESS 和Sass 具有可以使颜色更加透明或更加透明的功能。

【讨论】：

我总是忘记 SCSS/LESS。总是。也许我需要开始实际使用它们。
在SCSS中是transparentize([color], 0.8)。见sass-lang.com/documentation/Sass/Script/…

【解决方案4】：

现在是 2017 年，现在可以使用

CSS custom properties / CSS Variables (Caniuse)

CSS 变量的一个经典用例是能够个性化属性值的各个部分。

所以在这里，而不是再次重复整个 rgba 表达式 - 我们将rgba 值拆分或“个性化”为 2 个部分/变量（一个用于 rgb 值，一个用于 alpha）

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

然后，在悬停时，我们现在可以修改 --alpha 变量：

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

Codepen

延伸阅读：

Individualizing CSS Properties with CSS Variables (Dan Wilson)

【讨论】：

【解决方案5】：

不，这是不可能的。

如果要使用rgba，则必须将每个值设置在一起。没有办法只改变 alpha。

【讨论】：

【解决方案6】：

还有一种选择，你可以在原色上添加一个线性渐变背景图片。

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

另外，使用css3过滤器属性，你也可以这样做，但它似乎会改变文本颜色

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

这是一个 jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/

【讨论】：

目前为止唯一让我满意的答案。
同意安德烈。可以使用 css 变量进一步简化。已添加答案以澄清。

【解决方案7】：

为什么不使用:hover 并在悬停类中指定不同的不透明度？

a:hover {
     opacity:0.6
}

【讨论】：

因为这会影响整个元素。
对于 SVG 对象，可以使用fill-opacity
不仅是整个元素，还有所有子元素。
也许并不完美，但在某些情况下很有用。

【解决方案8】：

简单的解决方案：

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

示例：https://jsfiddle.net/epwyL296/14/

只玩背景的 alpha。如果你想要光明而不是黑暗，只需将#000 替换为#fff

【讨论】：

【解决方案9】：

我遇到了类似的问题。我有 18 个不同的 div 作为按钮，每个都有不同的颜色。我没有找出每个颜色代码或使用 div:hover 选择器来更改不透明度（这会影响所有孩子），而是使用伪类 :before 就像@Chris Boon 的回答一样。

因为我想对单个元素进行着色，所以我使用 :before 在 :hover 上创建了一个透明的白色 div。这是一个非常基本的冲洗。

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

根据 CanIUse.com 的说法，截至 2014 年初，这应该有大约 92% 的支持。(http://caniuse.com/#feat=css-gencontent)

【讨论】：

【解决方案10】：

你可以用 CSS 变量来做这件事，虽然有点乱。

首先，设置一个变量，其中包含仅您要使用的颜色的 RGB 值：

:root {
  --color-success-rgb: 80, 184, 60; 
}

然后您可以为颜色分配一个 RGBA 值，然后从该变量中提取除 alpha 值之外的所有内容：

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

这不是很漂亮，但它可以让您对颜色使用相同的 RGB 值但不同的 alpha 值。

【讨论】：

这是一个合理的解决问题的方法。而且，带有颜色的变量不必在:root 上，它可以在元素的类上，设置它的基色。谢谢！

【解决方案11】：

更新：很遗憾，这是不可能的。您需要编写两个单独的选择器：


a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

根据 W3C，rgba 属性不具有/不支持 inherit 值。

【讨论】：

问题是inherit 不是一个有效的函数参数。您会注意到它不适用于任何其他 CSS 函数。
函数是指rgba 和transitions 之类的东西吗？因为我知道很多属性都支持它。
是的，还有url()、attr() 等。 inherit 只是一个属性值。
我已经知道url() 和转换。我只是不是 100% 确定 rgba，因为它用于颜色。谢谢你教育我:)！

【解决方案12】：

我遇到了类似的问题。这是我所做的，通过以下步骤可以正常工作（only alpha changes on hover and also the text is not affected）：

1) 将突出显示（或您选择的任何）类应用于您希望更改其背景 alpha 的任何元素。

2) 获取背景色rgba

3) 将其存储在字符串中并在悬停时根据需要对其进行操作（更改 alpha）（mouseenter 和 mouseleave）

HTML 代码：

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

CSS 代码：

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

Javascript 代码：

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

工作小提琴：http://jsfiddle.net/HGHT6/1/

【讨论】：

【解决方案13】：

如果您可以适应 background-color 的细微变化，则使用 opacity 的简单解决方法：

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

【讨论】：

【解决方案14】：

基于张宇的回答：

在 :root 中（或 Blazor 中的父组件）设置 css 变量：

--bg-img-light: linear-gradient(hsla(255,100%,100%,.2) 100%, transparent 100%);
--bg-img-dark: linear-gradient(hsla(0,0%,0%,.2) 100%, transparent 100%);

然后在任何要应用悬停效果的元素上：

.buttontomakelighter:hover {
  background-image: var(--bg-img-light);
}

.buttontomakedarker:hover {
  background-image: var(--bg-img-dark);
}

【讨论】：

【解决方案15】：

这是最简单的方法；把它放在你的 CSS 样式表中：

a:hover { color : #c00; }

完成！

【讨论】：

- 只需将颜色与接近的颜色匹配即可。不透明度不适用于所有浏览器。
你的回答很有技巧，但你的评论完全无关紧要。

选项1：::before伪元素：

选项 2：白色 gif 叠加：

选项 3：box-shadow 方法：

CSS custom properties / CSS Variables (Caniuse)

Codepen

延伸阅读：

选项1：`::before`伪元素：

选项 3：`box-shadow` 方法：