css - JSF,CSS - 动态降低亮度

Question

我在玩 CSS 样式。如何以某种方式智能地做到这一点？

我可以在 css 文件中手动创建绿色的 x 变体，但这一定不是解决方案..

<h:outputText value="#{bean.date1}" styleClass="green1"/>
<h:outputText value="#{bean.date2}" styleClass="green2"/>
<h:outputText value="#{bean.date3}" styleClass="green3"/>

如何“动态”减少它？

Answer 1

我假设当您说“动态地”时，您的意思是“以某种方式编程，而无需手动维护不同的 CSS 类”。如果是这样，您的场景就相当简单了——您可以让所有输出具有相同的颜色，但不透明度不同。您应该能够直接设置 style 属性:

<h:outputText value="#{bean.date1}" style="opacity:1"/>
<h:outputText value="#{bean.date2}" style="opacity:0.8"/>
<h:outputText value="#{bean.date3}" style="opacity:0.6"/>

~ Fiddled