在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(值)似乎不起作用 - 有没有办法在那里注入价值？使用铬

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;    
    } 

}