我正在做一个项目。在其中我需要一些渐变按钮。但我想为渐变叠加层使用一类，为十六进制颜色bg使用新的一类。我的问题是没有十六进制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>颜色。
最佳答案
渐变中的background会覆盖背景色。不必将颜色添加到每个background属性，而是只需将所有渐变background属性background-image命名为即可，因为渐变称为背景图像。然后可以使用background-color类更改c。
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>关于html - 为bg应用透明的渐变叠加和十六进制颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35582458/