jquery - 自定义形状并通过带有 jquery 的按钮更改背景图像？

Question

是否可以通过 jquery 中的按钮拥有矢量形状并动态更改背景图像？

即我需要有一个自定义形状，并且能够有一个可以将背景图像更改为其他内容的按钮..

例如:

说一个有 3 个按钮的星形，一个是羊，一个是圆点，一个是纯色

这些按钮使用应用于按钮名称的预设图像更改星形的背景图像？

如果这有意义??

提前致谢

李

Answer 1

我将从一个简单的方形 div 区域开始，然后使用此代码更改图像。

  $('#btn1').click(function() {
    $('#divBackground').css('background-image', 'stars.jpg');
});

$('#btn2').click(function() {
    $('#divBackground').css('background-image', 'sheep.jpg');
});

$('#btn3').click(function() {
    $('#divBackground').css('background-image', 'dots.jpg');
});

然后我可能会在这个 div 的顶部放置一个图像，从中间切出一个星形以用作剪贴蒙版。我可能对 CSS 有点困难，您可能需要修改定位和 z-index 才能使其正确。

另一种选择是探索 HTML5 canvas 功能，这可能是走这条路线的一些更简单的方法。

这是一个概念性的例子:http://jsfiddle.net/VTQSM/1/