3

背景に画像がある 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;
}

ornamentdivのクラスです。

JavaScript

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

どのように画像を埋めることができますか？

JavaScriptを使用fillStyleして画像を塗りつぶそうとしましたが、成功しませんでした。fill()しかし、使用canvasする可能性があるようです。

フィドル: http://jsfiddle.net/9EFdF/21/

注：プログレスバーの効果が欲しいので、色は下から来る必要があります。

4

2 に答える 2

2

次のように要素に新しいスタイルを設定するだけです-注:変更されるのは画像の透明な部分になるため、この場合、内側の部分の色を変更して透明度を変更したい場合は、その部分が透明になるようにします:

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

最初に使用することを選択できgetElementByIdますが、ID を持つ要素は直接参照できますが、たとえば次のようになります。

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

UPDATED FIDDLE

画像をそのままにして内部を塗りつぶしたい場合、他の唯一のオプションはキャンバスとその合成モードを使用することです。

于 2013-07-18T14:29:12.247 に答える
1

div が背景画像と同じサイズの場合、div にbackground-colorスタイルを追加すると、透明な画像を通して色が表示されます。

于 2013-07-18T14:26:54.557 に答える