悬停时是否可以仅更改rgba背景颜色的Alpha？

100

我有一套 <a>标签，标签的rgba背景颜色不同，但是alpha相同。是否可以编写单个CSS样式来仅更改rgba属性的不透明度？

代码的简单示例：

 <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);}
css  hover  background-color  rgba 
— 消防飞行
source
顺便说一下，您的div元素在元素中做什么a？
— BoltClock
2
— 墨卡托
@商人：好的。我错过了。
— BoltClock
@BoltClock似乎是最简单的编码效果的方法，一个a标签而不是一个标签围绕一个标签img，另一个标签围绕文本。HTML 5支持它的事实是一个不错的收获。
— Fireflight
当问这个问题时-CSS不可能做到这一点。正如我在自己的答案中所示
— Danield，

Answers:

51

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

.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); }

要了解其工作原理，请参阅如何将不透明度应用于CSS颜色变量？

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

不幸的是，不，您必须为每个单独的类再次指定红色，绿色和蓝色值：

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此处也不适合使用。

— BoltClock
source
15

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

  • 您尚未将psuedo元素用于某些用途；和
  • 您可以position在<div>标签上设置为相对或绝对

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

— 克里斯·布恩
source
好答案，谢谢。如果反转此方法，我发现第三个选项有用且更简单：在没有悬停的情况下不要使用其他任何东西，并且在悬停时使用：box-shadow：inset 0 0 0 99999px rgba（128,128,128,0.2）。这对我来说是必要的，因为我的行交替显示白色和浅灰色，因此原始答案不会更改白色。
— Dovev Hefetz
6

不，那不可能。

如果要使用rgba，则必须一起设置每个值。无法仅更改Alpha。

— 三十点
source
5

现在是2017年，现在可以

CSS自定义属性/ CSS变量（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;
}

显示代码段

码笔

进一步阅读：

使用CSS变量个性化CSS属性（Dan Wilson）

— 丹尼尔
source
3

还有一种选择，您可以在原始颜色上添加线性渐变背景图像。

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/

— 张瑜
source
到目前为止，对我来说唯一令人满意的答案。
— 安德烈·埃里科
3

简单的解决方案：

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

— 矩阵
source
2

我有一个类似的问题。我有18个不同的div作为按钮，每个div都有不同的颜色。与使用@Chris Boon的答案一样，我没有使用伪类：来找出每种颜色的颜色或使用div：hover选择器来更改不透明度（这会影响所有孩子）。

因为我想对单个元素进行着色，所以我使用了：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）

— 约西亚
source
2

您可以使用CSS变量来做到这一点，尽管有点麻烦。

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

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

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

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

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

— 亚当·霍利特
source
1
这是对该问题的合理解决方案。并且，带有颜色的变量不必位于on :root，它可以位于element的类上，设置其基本颜色。谢谢！
— 布拉德（Brad）
1

更新：不幸的是，这不可能。您需要编写以下两个单独的选择器：


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

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

— y
source
问题是这inherit不是有效的函数参数。您会注意到它不适用于任何其他CSS函数。
— BoltClock
按功能，您指的是rgba和transitions吗？因为我知道很多属性都支持它。
— 2011年
是啊，随着url()，attr()等过。inherit仅是一个属性值。
— BoltClock
我已经知道url()和过渡了。我只是不确定100％，rgba因为它用于颜色。谢谢你，尽管教育我:)！
— 2011年
1

我遇到了类似的问题。这是我所做的，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/

— 乐喜
source
0

opacity如果您可以对以下内容进行一些细微改动，则可以采用简单的解决方法background-color：

.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;
}
— 阿尔弗雷德·华莱士
source
-5

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

a:hover { color : #c00; }

完成！

— 博士 空值
source
-只需将颜色匹配到接近的颜色即可。不透明性不适用于所有浏览器。
— 博士 null
您的答案有一个很好的技巧，但您的评论完全无关紧要。
— BoltClock
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.