gpt4 book ai didi

javascript - 在 JavaScript 中创建透明图像的填充动画

转载 作者:行者123 更新时间:2023-11-29 10:47:01 26 4
gpt4 key购买 nike

给定一个在背景中有图像的 div,如果这个图像是透明的(这是一个重要的细节),我该如何改变它的颜色?可能吗?

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 是 div 的类。

JavaScript

var divImage = document.getElementById('imagediv');
var divStyle = divImage.currentStyle || window.getComputedStyle(divImage, false);
var divBackImage = divStyle.backgroundImage;

图片怎么填充?


我尝试使用 JavaScript 的 fillStylefill() 填充图像,但没有成功。但似乎可以使用 canvas


fiddle :http://jsfiddle.net/9EFdF/21/

注意:我要的是进度条的效果,所以颜色要从底面来。

最佳答案

您可以像这样简单地为元素设置一个新样式 - 注意:图像的透明部分会发生变化,因此在这种情况下,如果您希望内部部分改变颜色改变透明度,使部分透明:

imagediv.style.backgroundColor = '#000'; //new color

您可以选择先使用getElementById,但是,可以直接引用具有ID 的元素,但为了举例:

var el = document.getElementById('imagediv');
el.style.backgroundColor = '#000'; //new color

UPDATED FIDDLE

如果您想保持图像原样并填充其内部,唯一的其他选择是使用 Canvas 及其复合模式。

关于javascript - 在 JavaScript 中创建透明图像的填充动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17726161/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com