在css3顏色中使用數據屬性

我想根據值爲一個進度條着色。在css3顏色中使用數據屬性

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（價值）似乎沒有工作 - 有沒有辦法在那裏注入價值？使用chrome

來源

2016-08-23 K2xL

很多人的夢想，但在那一刻，'ATTR（）'只能在'content'性能 - 參見[第二段]（https://developer.mozilla.org/en/docs/網絡/ CSS/attr）使用。 – Scott

此外，:: - webkit-progress-value不是官方標準。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value –

如果您以前使用僞元素來顯示您的進度？也許這可以工作？

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

}

來源

2016-11-11 19:02:45 Vincent

在css3顏色中使用數據屬性

回答

相關問題