css - Creating a filling animation on transparent image in JavaScript -
given div has image in background, if this image transparent (this important detail), how can change color? possible?
html
<body> <div> <hr/> <div id ='imagediv' class="ornament"></div> </div> </body> css
body { margin-top: 100px; background: url('http://hostmypicture.com/images/fundokairo.png') repeat; } hr { height: 30px; color: #578daf; background: url('http://hostmypicture.com/images/barrapreta.png') repeat-x 0 50%; border: 0; padding: 0; margin: 9px 0 0 0; } .ornament { width: 169px; height: 169px; background: url('http://s23.postimg.org/6prq112g7/mascara_fundo_branco_kairos.png') 0 50%; margin: -104px auto 0 auto; } ornament class of div.
javascript
var divimage = document.getelementbyid('imagediv'); var divstyle = divimage.currentstyle || window.getcomputedstyle(divimage, false); var divbackimage = divstyle.backgroundimage; how can image filled?
i tried without success fill image using fillstyle , fill() of javascript. seems using canvas possibility.
fiddle: http://jsfiddle.net/9efdf/21/
note: want effect of progress bar, color needs come underside.
you can set new style element - note: transparent parts of image change in case if want inner part change color change transparency part transparent:
imagediv.style.backgroundcolor = '#000'; //new color you can chose use getelementbyid first, however, elements has id can referenced directly, example's sake:
var el = document.getelementbyid('imagediv'); el.style.backgroundcolor = '#000'; //new color if want keep image as-is , fill it's inner part other option use canvas , composite modes.
Comments
Post a Comment