为bg应用透明渐变叠加和六角色

Question

我正在开发一个项目。我需要一些渐变按钮。但我想使用渐变叠加和新颜色为六色bg的类。我的问题是没有hex bg。
我只想通过改变js的类来随时更改十六进制颜色。我不希望！十六进制值很重要。

感谢您的帮助！

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属性background-image，因为渐变称为背景图像。然后您可以使用c类更改background-color。

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>