给定一个在背景中有图像的div，如果该图像是透明的（这是一个重要的细节），如何更改其颜色？是否有可能？
<body>
<div>
<hr/>
<div id ='imagediv' class="ornament"></div>
</div>
</body>
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 是div的类。
var divImage = document.getElementById('imagediv');
var divStyle = divImage.currentStyle || window.getComputedStyle(divImage, false);
var divBackImage = divStyle.backgroundImage;
如何填充图像？
我尝试使用fillStyle和来填充图像没有成功fill()。但是似乎canvas有可能使用。
小提琴：http : //jsfiddle.net/9EFdF/21/
注意：我需要进度条的效果，因此颜色需要来自底面。
您可以像这样简单地为元素设置新样式-注意：它将是图像的透明部分，它将发生变化，因此，在这种情况下，如果您希望内部部分更改颜色，则更改透明性以使该部分是透明的：
imagediv.style.backgroundColor = '#000'; //new color
您可以选择先使用getElementById，但是可以直接引用具有ID的元素，但是例如：
var el = document.getElementById('imagediv');
el.style.backgroundColor = '#000'; //new color
如果要保持图像原样并填充图像的内部，唯一的选择是使用画布及其合成模式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句