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

时间：2011-08-05 20:45:52

标签： css css3 hover background-color rgba

我有一组<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);}

15 个答案:

答案 0 :(得分：43)

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

.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的使用也不合适。

答案 1 :(得分：12)

不，这是不可能的。

但是，如果你想做这类事，你可以试试CSS pre-processor。

从我所看到的情况来看，至少LESS和Sass具有的功能可以使颜色更透明或更少透明。

答案 2 :(得分：12)

如果您愿意，可以做各种事情以避免硬编码。其中一些方法仅在使用纯白色背景时才有效，因为它们实际上是在顶部添加白色而不是降低不透明度。第一个应该可以正常工作：

  • 你还没有使用psuedo-element做某事;和
  • 您可以在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

答案 3 :(得分：6)

不，那是不可能的。

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

答案 4 :(得分：5)

现在是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 :(得分：2)

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

a:hover {
     opacity:0.6
}

答案 6 :(得分：2)

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

因为我想对各个元素进行着色，所以我使用：之前创建一个透明的白色div：hover。这是一个非常基本的冲突。

#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）

答案 7 :(得分：2)

你可以用CSS变量做到这一点，虽然它有点乱。

首先，按顺序设置一个包含 RGB值的变量，用于您想要使用的颜色：

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

然后，您可以为颜色指定RGBA值，并从该变量中提取除alpha值之外的所有值：

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

这不是非常漂亮，但它允许您使用相同的RGB值但颜色的alpha值不同。

答案 8 :(得分：1)

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


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

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

答案 9 :(得分：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/

答案 10 :(得分：1)

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

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 filter属性，你也可以这样做，但似乎它会改变文本颜色

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

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

答案 11 :(得分：0)

简单的解决方案：

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。如果你想要光而不是黑暗，只需用#fff

替换＃000

答案 12 :(得分：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;
}

答案 13 :(得分：0)

以张宇的回答为基础：

在 :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);
}

答案 14 :(得分：-4)

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

a:hover { color : #c00; }

完成！

相关问题
最新问题