css - 仅更改 alpha 未知颜色

Question

我的课很少:

.overlay-blue {background-color: rgba(0,123,238,0.9);}
.overlay-orange { background-color:rgba(240,116,7,0.9); }
.overlay-purple { background-color:rgba(126,64,228,0.9); }
.overlay-green { background-color:rgba(57,151,95,0.9) }
.overlay-pink { background-color:rgba(173,33,106,0.9); }
.overlay-light-blue {background-color:rgba(0,183,168,0.9) }
.overlay-red {background-color:rgba(235,50,89,0.9); }


.overlay:hover
{
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    background-color: rgba(0,0,0,0.3);
}

@-webkit-keyframes fadeInFromNone {
    0% {display:block; background-color: rgba(0,0,0,0.9);}
    1% {display: block ; background-color: rgba(0,0,0,0.89);}
    100% {display: none ; background-color: rgba(0,0,0,0.3);}
}

`

这个悬停功能运行良好，但由于线条的缘故，它在启动动画时将叠加层变为黑色

0% {display:block; background-color: rgba(0,0,0,0.9);}

这是有道理的。

有没有办法在不为每种颜色复制代码的情况下使 alpha channel 变暗？

Answer 1

您当前的方法没有简单的方法，因为不可能仅针对 rgba() 属性中的 alpha channel 单独进行更改。但是，您可以做的不是在元素上设置背景颜色，而是将伪元素的背景颜色设置为拉伸(stretch)到其父元素的完整维度，并且只声明 rgb()值。可以将 Alpha channel 更改委托(delegate)给 opacity 属性。我称之为伪元素方法:

伪元素方法

/* Define BG colours of pseudo element instead */
.overlay-blue::before { background-color: rgb(0,123,238);}
.overlay-orange::before { background-color:rgb(240,116,7); }
/* and more... */

/* Set relative positioning of parent element */
.overlay {
    position: relative;
}

/* Stretch pseudo element, declare empty content so it will show */
.overlay::before {
    content: '';
    opacity: .9;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .5s ease-in-out;
    z-index: -1;
}

/* Change opacity when parent element is hovered upon */
.overlay:hover::before {
    opacity: 0.3;
}

当然，这是对您的问题 (see demo fiddle here) 的一个相当基本的实现，因为我不知道您想使用动画关键帧实现的确切细节。好消息是伪元素也可以是动画的:)

SASS 方法

更好:或者，您可能想考虑使用 CSS 预处理器(SCSS、LESS)，这样您就可以使用变量，而不必重复地重新声明背景颜色。 See the demo here .

您可以使用以下混入:

/* Declare mixin */
@mixin overlayColor($color) {
    background-color: rgba($color, 0.9);
    &:hover { background-color: rgba($color, 0.3); }
}

/* Use @include for each colour class, you only have to declare the rgb(a) values */
.overlay {
    margin-bottom: 10px;
    padding: 20px;
    position: relative;
    transition: all .5s ease-in-out;

    &.overlay-blue {
        @include overlayColor(rgb(0,123,238));
    }
    &.overlay-orange {
        @include overlayColor(rgb(240,116,7));
    }
    /* and more... */
}