在JSF应用程序中更改和保存css渐变

Question

我已经使用特定样式制作了以下图表，以指示不同内存消耗级别的级别。我通过为类的background指定渐变来实现，如下所示：

background: linear-gradient(to bottom, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) 19%,rgba(242,242,0,0.2) 20%,rgba(242,242,0,0.2) 39%,rgba(97,196,25,0.2) 40%,rgba(97,196,25,0.2) 100%); 

但现在的挑战是梯度水平需要由用户修改。我有一个JSF应用程序，当然允许使用jquery和JS。

• 所以我需要改变绿黄色和黄红色之间的两个边界条件。
• 在设置中保存新渐变，以便在页面刷新时应用它。

这甚至可能吗？有任何想法吗？如果我需要分享更多信息，请告诉我。

Answer 1

    <style type="text/css">
        .jqplot-series-canvas{
            background: -moz-linear-gradient(top, rgba(247,49,0,0.2) 0%, rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%, rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%, rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%, rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%, rgba(97,196,25,0.2) 100%);
            background: -webkit-linear-gradient(top, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%,rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%,rgba(97,196,25,0.2) 100%);
            background: linear-gradient(to bottom, rgba(247,49,0,0.2) 0%,rgba(247,49,0,0.2) #{chartCustomizeBean.yellowRedLimit -1}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowRedLimit}%,rgba(242,242,0,0.2) #{chartCustomizeBean.yellowGreenLimit -1}%,rgba(97,196,25,0.2) #{chartCustomizeBean.yellowGreenLimit}%,rgba(97,196,25,0.2) 100%);
        }
    </style>

感谢来自@Kukeltje的指针，我可以通过将类包含在xhtml页面的标题内来设置动态渐变。从UI表单中可以更改值，然后在提交时我更新页面并更新新值。保存的按钮设计如下，以便在提交时重新加载页面，同时更新渐变值。

<h:commandButton type="submit"
     styleClass="data-customize" id="data-customize" 
     actionListener="#{chartCustomizeBean.save}"                                                             
     onclick="location.reload(true);"                                                             
     value="Save">