为 bg 应用透明渐变叠加和十六进制颜色

Question

我正在做一个项目。其中我需要一些渐变按钮。但我想使用 class 作为渐变叠加层，并为十六进制颜色背景使用新的。我的问题是没有十六进制背景。
我只想通过 js 更改 class 随时更改十六进制颜色。我不想要 !important 十六进制值。

提前感谢您的帮助！

body {
    font-family: arial;
    color: #FFF;
    font-size: 20px;
}
.c {
    background-color: #9C27B0;
}
.GB {
    border-radius: 6px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 26px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.35)), color-stop(1%, rgba(0,0,0,0.34)), color-stop(11%, rgba(0,0,0,0.29)), color-stop(62%, rgba(0,0,0,0)));
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background: -o-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background: -ms-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.GB:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 0px;
    color: #FFF;
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, rgba(0,0,0,0)), color-stop(89%, rgba(0,0,0,0.27)), color-stop(99%, rgba(0,0,0,0.32)), color-stop(100%, rgba(0,0,0,0.35)));
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background: -o-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background: -ms-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}

<a class="GB c">Button</a>

颜色.

Answer 1

渐变中的 background 会覆盖背景色。您可以简单地将所有渐变 background 属性命名为 background-image，而不是将颜色添加到每个 background 属性，因为渐变被称为背景图像。然后您可以将 background-color 更改为 c class.

body {
    font-family: arial;
    color: #FFF;
    font-size: 20px;
}
.c {
    background-color: #9C27B0;
}
.GB {
    border-radius: 6px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 26px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.35)), color-stop(1%, rgba(0,0,0,0.34)), color-stop(11%, rgba(0,0,0,0.29)), color-stop(62%, rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background-image: -o-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background-image: -ms-linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    background-image: linear-gradient(0deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.29) 89%, rgba(0,0,0,0.34) 99%, rgba(0,0,0,0.35) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: pointer;
}
.GB:active {
    position: relative;
    border-bottom: 0px solid rgba(0,0,0,0.21);
    margin-top: 0px;
    color: #FFF;
    background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(38%, rgba(0,0,0,0)), color-stop(89%, rgba(0,0,0,0.27)), color-stop(99%, rgba(0,0,0,0.32)), color-stop(100%, rgba(0,0,0,0.35)));
    background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background-image: -ms-linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    background-image: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.32) 1%, rgba(0,0,0,0.27) 11%, rgba(0,0,0,0) 62%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}

<a class="GB c">Button</a>

为 bg 应用透明渐变叠加和十六进制颜色

Apply transparent gradient overlay and hex color for bg

html

css

gradient

button