我可以将背景图像放到具有background: url(dump.gif);
的css的特定div中。如果说gif是透明的,我可以使用css将背景颜色应用于它。假设我单击一个按钮,命令运行只更改透明图像的背景,该图像嵌入到更大的div中。
想象一下,玻璃被嵌入到一个更大的div中,并按照描述设置为css背景。任何方式只能改变它的背景。
“不”是答案,至少我会停止疑惑。
编辑:添加了jsfiddle。如果glas有误导性,请点击小提琴。基本上是移动加载图像的位置。我想用这段代码改变它的背景。
答案 0 :(得分:2)
您可以使用canvas API。 (另见https://developer.mozilla.org/en-US/docs/Canvas_API/Tutorial/Pixel_manipulation_with_canvas/)
你可以做他们用于变色器的事情:
java.awt.Frame.setUndecorated(boolean)
您现在拥有一个包含图像颜色的数组 然后在函数中编写一些代码来循环遍历像素,并在它为白色时基本上改变它(或者gif具有的任何其他默认背景颜色)。
然后用var img = new Image();
img.src = 'your pic source';
img.onload = function() {
draw(this);
};
function draw(img) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
img.style.display = 'none';
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
var data = imageData.data;
希望这就是你的意思。
答案 1 :(得分:1)
您可以使用Javascript生成一个像素base64编码图像,而不是将其设置为第二背景。查看Fiddle或查看以下内容:
function encodeHex(s) {
s = s.substring(1, 7);
if (s.length < 6) {
s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
}
return encodeRGB(
parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16));
};
function encodeRGB(r, g, b) {
return encode_triplet(0, r, g) + encode_triplet(b, 255, 255);
};
function encode_triplet(e1, e2, e3) {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
enc1 = e1 >> 2;
enc2 = ((e1 & 3) << 4) | (e2 >> 4);
enc3 = ((e2 & 15) << 2) | (e3 >> 6);
enc4 = e3 & 63;
return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
};
function generatePixel(color) {
return "data:image/gif;base64,R0lGODlhAQABAPAA" + color + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
};
var imageDiv = $('.big_div');
var originalImage = imageDiv.css('background-image');
$('.change_color').on('click', function (e) {
var hex = $('#color_hex').val();
var color = encodeHex(hex);
var data = generatePixel(color);
imageDiv.css({
'background-image': originalImage + ', url(' + data + ')'
});
});
&#13;
.big_div {
background: url('http://info.eps.surrey.ac.uk/logos/transbugs.gif') no-repeat center center;
background-size: 160px 100px;
width: 300px;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big_div"></div>
<fieldset>
<legend>Pick color:</legend>
<p>
<label for="color_hex">Hex color:</label>
<input id="color_hex" type="text" placeholder="#ccc" />
</p>
<p>
<button class="change_color">Change color</button>
</p>
</fieldset>
&#13;
为了对颜色进行编码,感谢this Fiddle,找不到作者的名字。