css - 在 css3 颜色中使用数据属性

Question

我正在尝试根据值为进度条着色。

progress[value]::-webkit-progress-value {
    position: relative;
    background-color: rgba(0, attr(value) ,0,1);
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

看起来 attr(value) 似乎不起作用 - 有没有办法在其中注入(inject)值(value)？使用 Chrome

Answer 1

如果你之前使用伪元素来显示你的进度？也许这可行？

progress[value]::-webkit-progress-value {

    &:before{
        content: [attr-data];
        display: block;
        position: relative;
        background-color: rgba(0, attr(value) ,0,1);
        background-size: 35px 20px, 100% 100%, 100% 100%;
        border-radius:3px;

        /* Let's animate this */
        animation: animate-stripes 5s linear infinite;    
    } 

}